Skip to content

[SDK] Add enableCard prop to control fiat payment visibility #7465

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jun 28, 2025

Conversation

gregfromstl
Copy link
Member

@gregfromstl gregfromstl commented Jun 27, 2025

Adds enableCard prop to BuyWidget, CheckoutWidget, and TransactionWidget components to allow hiding the "Buy with card" fiat payment option.

🤖 Generated with Claude Code


PR-Codex overview

This PR introduces a paymentMethods property across various components to control available payment options, allowing users to select between "crypto" and "card". This enhancement improves flexibility in payment processing.

Detailed summary

  • Added paymentMethods property to BuyWidget, CheckoutWidget, and TransactionWidget.
  • Updated types to include paymentMethods: ("crypto" | "card")[].
  • Enhanced PayEmbed to conditionally render payment methods based on props.
  • Introduced checkboxes in LeftSection for selecting payment methods.
  • Updated WalletFiatSelection to handle payment method display based on selected options.

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

Summary by CodeRabbit

  • New Features
    • Added support to configure available payment methods ("crypto" and/or "card") in BuyWidget, CheckoutWidget, and TransactionWidget components.
    • Enhanced payment selection UI to conditionally show or hide crypto and card options based on selected payment methods.
    • Introduced checkboxes in the playground UI to toggle payment methods dynamically for buy and checkout widgets.
    • Updated payment method labels for clearer user guidance during payment selection.

Adds enableCard prop to BuyWidget, CheckoutWidget, and TransactionWidget components to allow hiding the "Buy with card" fiat payment option.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
@gregfromstl gregfromstl requested review from a team as code owners June 27, 2025 21:44
Copy link

changeset-bot bot commented Jun 27, 2025

🦋 Changeset detected

Latest commit: abd2103

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
thirdweb Patch
@thirdweb-dev/nebula Patch
@thirdweb-dev/wagmi-adapter Patch

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

Copy link

vercel bot commented Jun 27, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
docs-v2 ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 28, 2025 10:44am
nebula ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 28, 2025 10:44am
thirdweb_playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 28, 2025 10:44am
thirdweb-www ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 28, 2025 10:44am
wallet-ui ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 28, 2025 10:44am

Copy link
Contributor

coderabbitai bot commented Jun 27, 2025

## Walkthrough

A new optional `paymentMethods` property was introduced to the `BuyWidget`, `CheckoutWidget`, `TransactionWidget`, `BridgeOrchestrator`, `PaymentSelection`, and `WalletFiatSelection` components. This property accepts an array containing `"crypto"` and/or `"card"` to control which payment methods are available and conditionally render payment options in the UI. Additionally, playground UI components were updated to allow selecting payment methods, and the `PayEmbed` component refined logic for determining enabled payment methods based on flags.

## Changes

| Files/Groups                                                                                      | Change Summary                                                                                                  |
|-------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|
| .changeset/dull-breads-start.md                                                                  | Added a changeset describing the addition of the `paymentMethods` prop to BuyWidget, CheckoutWidget, and TransactionWidget. |
| packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx<br>packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx<br>packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx | Added optional `paymentMethods` prop to widget props interfaces/types and passed it to BridgeOrchestrator.      |
| packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx                                 | Added optional `paymentMethods` prop with default `["crypto", "card"]` to orchestrator props and passed it to PaymentSelection during method selection. |
| packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx                 | Added optional `paymentMethods` prop with default `["crypto", "card"]` to selection props and passed it to WalletFiatSelection; renamed local variable to avoid conflicts. |
| packages/thirdweb/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.tsx              | Added optional `paymentMethods` prop; conditionally renders "Pay with Crypto" and "Pay with Card" UI based on presence in `paymentMethods`; changed heading text to "Pay with Card." |
| packages/thirdweb/src/react/web/ui/PayEmbed.tsx                                                  | Refined logic for determining `paymentMethods` prop based on `buyWithFiat` and `buyWithCrypto` flags; removed extraneous JSDoc newline. |
| apps/playground-web/src/app/connect/pay/components/CodeGen.tsx                                  | Extended JSX code generation to conditionally include `paymentMethods` prop if present in options.              |
| apps/playground-web/src/app/connect/pay/components/types.ts                                     | Added required `paymentMethods` property to `payOptions` type; updated import statements for `Chain` and `Address`. |
| apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx                                   | Added UI checkboxes for selecting "Crypto" and "Card" payment methods in "buy" and "checkout" widget modes; updated `payOptions.paymentMethods` accordingly. |
| apps/playground-web/src/app/connect/pay/embed/RightSection.tsx                                  | Passed `paymentMethods` prop from `payOptions` to `BuyWidget`, `CheckoutWidget`, and `TransactionWidget`.       |
| apps/playground-web/src/app/connect/pay/embed/page.tsx                                          | Added default `paymentMethods` array with `["crypto", "card"]` to `defaultConnectOptions` in `payOptions`.      |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
    participant PayEmbed
    participant Widget (Buy/Checkout/Transaction)
    participant BridgeOrchestrator
    participant PaymentSelection
    participant WalletFiatSelection

    PayEmbed->>Widget: Render with paymentMethods (based on payOptions.buyWithFiat and buyWithCrypto)
    Widget->>BridgeOrchestrator: Pass paymentMethods prop
    BridgeOrchestrator->>PaymentSelection: Pass paymentMethods prop
    PaymentSelection->>WalletFiatSelection: Pass paymentMethods prop
    WalletFiatSelection-->>WalletFiatSelection: Conditionally render crypto/card payment UI based on paymentMethods

Possibly related PRs

Suggested reviewers

  • jnsdls

<!-- walkthrough_end -->

<!-- This is an auto-generated comment: resource warnings by coderabbit.ai -->

> [!WARNING]
> ## Review ran into problems
> 
> <details>
> <summary>🔥 Problems</summary>
> 
> Errors were encountered while retrieving linked issues.
> 
> <details>
> <summary>Errors (1)</summary>
> 
> * TEAM-0000: Entity not found: Issue - Could not find referenced Issue.
> 
> </details>
> 
> </details>

<!-- end of auto-generated comment: resource warnings by coderabbit.ai -->

---

<details>
<summary>📜 Recent review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**


<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 633856ace2c0b74f5b21e34ea2afb192571f5959 and abd21038f9ef0a2f4cbf205236465a079d98b149.

</details>

<details>
<summary>⛔ Files ignored due to path filters (1)</summary>

* `pnpm-lock.yaml` is excluded by `!**/pnpm-lock.yaml`

</details>

<details>
<summary>📒 Files selected for processing (1)</summary>

* `packages/thirdweb/src/wallets/in-app/core/authentication/backend.test.ts` (1 hunks)

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (1)</summary>

* packages/thirdweb/src/wallets/in-app/core/authentication/backend.test.ts

</details>

<details>
<summary>⏰ Context from checks skipped due to timeout of 90000ms (8)</summary>

* GitHub Check: Size
* GitHub Check: E2E Tests (pnpm, webpack)
* GitHub Check: E2E Tests (pnpm, esbuild)
* GitHub Check: E2E Tests (pnpm, vite)
* GitHub Check: Lint Packages
* GitHub Check: Unit Tests
* GitHub Check: Build Packages
* GitHub Check: Analyze (javascript)

</details>

</details>
<!-- internal state start -->


<!-- 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 -->

<!-- internal state end -->
<!-- finishing_touch_checkbox_start -->

<details open="true">
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---



<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=thirdweb-dev/js&utm_content=7465):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Explain this complex logic.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai explain this code block.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and explain its main purpose.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

### Support

Need help? Create a ticket on our [support page](https://www.coderabbit.ai/contact-us/support) for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->

Copy link
Contributor

graphite-app bot commented Jun 27, 2025

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

  • merge-queue - adds this PR to the back of the merge queue
  • hotfix - for urgent hot fixes, skip the queue and merge this PR next

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.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (2)
packages/thirdweb/src/react/web/ui/PayEmbed.tsx (2)

362-362: Consider simplifying the conditional logic.

The current logic works correctly but can be simplified for better readability:

-        enableCard={props.payOptions?.buyWithFiat === false ? false : true}
+        enableCard={props.payOptions?.buyWithFiat !== false}

This achieves the same result (enableCard is false only when buyWithFiat is explicitly false) with more concise code.

Also applies to: 381-381, 398-398


519-522: Unrelated formatting change detected.

The autoConnect type definition formatting appears to be an unrelated change. While the formatting is fine, it's generally better to keep formatting changes separate from functional changes for cleaner commit history.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6d1d344 and a6b3d14.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (8)
  • .changeset/dull-breads-start.md (1 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx (3 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (2 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (2 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx (2 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (3 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.tsx (3 hunks)
  • packages/thirdweb/src/react/web/ui/PayEmbed.tsx (4 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.@(ts|tsx)`: Accept a typed 'props' object and export a named function (e.g...

**/*.@(ts|tsx): Accept a typed 'props' object and export a named function (e.g., export function MyComponent()).
Combine class names via 'cn', expose 'className' prop if useful.
Reuse core UI primitives; avoid re-implementing buttons, cards, modals.
Local state or effects live inside; data fetching happens in hooks.
Merge class names with 'cn' from '@/lib/utils' to keep conditional logic readable.
Stick to design-tokens: background ('bg-card'), borders ('border-border'), muted text ('text-muted-foreground') etc.
Use the 'container' class with a 'max-w-7xl' cap for page width consistency.
Spacing utilities ('px-', 'py-', 'gap-*') are preferred over custom margins.
Responsive helpers follow mobile-first ('max-sm', 'md', 'lg', 'xl').
Never hard-code colors – always go through Tailwind variables.
Tailwind CSS is the styling system – avoid inline styles or CSS modules.
Prefix files with 'import "server-only";' so they never end up in the client bundle (for server-only code).

📄 Source: CodeRabbit Inference Engine (.cursor/rules/dashboard.mdc)

List of files the instruction was applied to:

  • packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
  • packages/thirdweb/src/react/web/ui/PayEmbed.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx
🧠 Learnings (9)
📓 Common learnings
Learnt from: MananTank
PR: thirdweb-dev/js#7227
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx:26-26
Timestamp: 2025-05-30T17:14:25.332Z
Learning: The ModuleCardUIProps interface already includes a client prop of type ThirdwebClient, so when components use `Omit<ModuleCardUIProps, "children" | "updateButton">`, they inherit the client prop without needing to add it explicitly.
.changeset/dull-breads-start.md (1)
Learnt from: MananTank
PR: thirdweb-dev/js#7227
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx:26-26
Timestamp: 2025-05-30T17:14:25.332Z
Learning: The ModuleCardUIProps interface already includes a client prop of type ThirdwebClient, so when components use `Omit<ModuleCardUIProps, "children" | "updateButton">`, they inherit the client prop without needing to add it explicitly.
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (3)
Learnt from: MananTank
PR: thirdweb-dev/js#7227
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx:26-26
Timestamp: 2025-05-30T17:14:25.332Z
Learning: The ModuleCardUIProps interface already includes a client prop of type ThirdwebClient, so when components use `Omit<ModuleCardUIProps, "children" | "updateButton">`, they inherit the client prop without needing to add it explicitly.
Learnt from: gregfromstl
PR: thirdweb-dev/js#7450
File: packages/thirdweb/src/bridge/Webhook.ts:57-81
Timestamp: 2025-06-26T19:46:04.024Z
Learning: In the onramp webhook schema (`packages/thirdweb/src/bridge/Webhook.ts`), the `currencyAmount` field is intentionally typed as `z.number()` while other amount fields use `z.string()` because `currencyAmount` represents fiat currency amounts in decimals (like $10.50), whereas other amount fields represent token amounts in wei (very large integers that benefit from bigint representation). The different naming convention (`currencyAmount` vs `amount`) reflects this intentional distinction.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-23T13:49:58.951Z
Learning: Keep components pure by fetching data outside (in server components or hooks) and passing it down via props.
packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx (2)
Learnt from: MananTank
PR: thirdweb-dev/js#7227
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx:26-26
Timestamp: 2025-05-30T17:14:25.332Z
Learning: The ModuleCardUIProps interface already includes a client prop of type ThirdwebClient, so when components use `Omit<ModuleCardUIProps, "children" | "updateButton">`, they inherit the client prop without needing to add it explicitly.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-23T13:49:58.951Z
Learning: Keep components pure by fetching data outside (in server components or hooks) and passing it down via props.
packages/thirdweb/src/react/web/ui/PayEmbed.tsx (3)
Learnt from: MananTank
PR: thirdweb-dev/js#7227
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx:26-26
Timestamp: 2025-05-30T17:14:25.332Z
Learning: The ModuleCardUIProps interface already includes a client prop of type ThirdwebClient, so when components use `Omit<ModuleCardUIProps, "children" | "updateButton">`, they inherit the client prop without needing to add it explicitly.
Learnt from: gregfromstl
PR: thirdweb-dev/js#7450
File: packages/thirdweb/src/bridge/Webhook.ts:57-81
Timestamp: 2025-06-26T19:46:04.024Z
Learning: In the onramp webhook schema (`packages/thirdweb/src/bridge/Webhook.ts`), the `currencyAmount` field is intentionally typed as `z.number()` while other amount fields use `z.string()` because `currencyAmount` represents fiat currency amounts in decimals (like $10.50), whereas other amount fields represent token amounts in wei (very large integers that benefit from bigint representation). The different naming convention (`currencyAmount` vs `amount`) reflects this intentional distinction.
Learnt from: MananTank
PR: thirdweb-dev/js#7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.tsx:26-43
Timestamp: 2025-05-29T10:49:52.981Z
Learning: In React image components, conditional rendering of the entire image container (e.g., `{props.image && <Img />}`) serves a different purpose than fallback handling. The conditional prevents rendering any image UI when no image metadata exists, while the fallback prop handles cases where image metadata exists but the image fails to load. This pattern is intentional to distinguish between "no image intended" vs "image intended but failed to load".
packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (2)
Learnt from: MananTank
PR: thirdweb-dev/js#7227
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx:26-26
Timestamp: 2025-05-30T17:14:25.332Z
Learning: The ModuleCardUIProps interface already includes a client prop of type ThirdwebClient, so when components use `Omit<ModuleCardUIProps, "children" | "updateButton">`, they inherit the client prop without needing to add it explicitly.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-23T13:49:58.951Z
Learning: Keep components pure by fetching data outside (in server components or hooks) and passing it down via props.
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
Learnt from: MananTank
PR: thirdweb-dev/js#7227
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx:26-26
Timestamp: 2025-05-30T17:14:25.332Z
Learning: The ModuleCardUIProps interface already includes a client prop of type ThirdwebClient, so when components use `Omit<ModuleCardUIProps, "children" | "updateButton">`, they inherit the client prop without needing to add it explicitly.
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.tsx (3)
Learnt from: MananTank
PR: thirdweb-dev/js#7227
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx:26-26
Timestamp: 2025-05-30T17:14:25.332Z
Learning: The ModuleCardUIProps interface already includes a client prop of type ThirdwebClient, so when components use `Omit<ModuleCardUIProps, "children" | "updateButton">`, they inherit the client prop without needing to add it explicitly.
Learnt from: gregfromstl
PR: thirdweb-dev/js#7450
File: packages/thirdweb/src/bridge/Webhook.ts:57-81
Timestamp: 2025-06-26T19:46:04.024Z
Learning: In the onramp webhook schema (`packages/thirdweb/src/bridge/Webhook.ts`), the `currencyAmount` field is intentionally typed as `z.number()` while other amount fields use `z.string()` because `currencyAmount` represents fiat currency amounts in decimals (like $10.50), whereas other amount fields represent token amounts in wei (very large integers that benefit from bigint representation). The different naming convention (`currencyAmount` vs `amount`) reflects this intentional distinction.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-23T13:49:58.951Z
Learning: Prefer composable UI primitives (Button, Input, Select, Tabs, Card, Sidebar, Separator, Badge) over custom markup for maintainability and design consistency.
packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx (1)
Learnt from: MananTank
PR: thirdweb-dev/js#7227
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx:26-26
Timestamp: 2025-05-30T17:14:25.332Z
Learning: The ModuleCardUIProps interface already includes a client prop of type ThirdwebClient, so when components use `Omit<ModuleCardUIProps, "children" | "updateButton">`, they inherit the client prop without needing to add it explicitly.
🧬 Code Graph Analysis (1)
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.tsx (2)
packages/thirdweb/src/react/web/ui/components/buttons.tsx (1)
  • Button (19-140)
packages/thirdweb/src/react/web/ui/ConnectWallet/icons/CreditCardIcon.tsx (1)
  • CreditCardIcon (6-24)
⏰ Context from checks skipped due to timeout of 90000ms (9)
  • GitHub Check: Size
  • GitHub Check: Lint Packages
  • GitHub Check: E2E Tests (pnpm, vite)
  • GitHub Check: E2E Tests (pnpm, webpack)
  • GitHub Check: E2E Tests (pnpm, esbuild)
  • GitHub Check: Unit Tests
  • GitHub Check: Build Packages
  • GitHub Check: Socket Security: Pull Request Alerts
  • GitHub Check: Analyze (javascript)
🔇 Additional comments (13)
.changeset/dull-breads-start.md (1)

1-6: LGTM!

The changeset properly documents the addition of the enableCard prop to the three widget components with an appropriate patch-level version bump.

packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (2)

164-168: LGTM!

The enableCard prop is properly documented with clear JSDoc comments and follows the existing pattern for optional boolean props in the interface.


391-391: LGTM!

The enableCard prop is correctly passed down to the BridgeOrchestrator component, maintaining the prop flow through the component hierarchy.

packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (2)

170-174: LGTM!

The enableCard prop implementation is consistent with the pattern established in BuyWidget, with identical documentation and typing.


354-354: LGTM!

The prop forwarding to BridgeOrchestrator maintains consistency with other widget components.

packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx (2)

173-177: LGTM!

The enableCard prop implementation maintains perfect consistency with the other widget components, following the same documentation and typing patterns.


413-413: LGTM!

The prop forwarding completes the consistent pattern across all three widget components.

packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx (3)

117-120: LGTM!

The enableCard prop is properly added to the interface with consistent documentation that matches the widget components.


135-135: LGTM!

The enableCard parameter is correctly added to the function signature, maintaining consistency with the interface.


280-280: LGTM!

The enableCard prop is appropriately passed to PaymentSelection during the methodSelection state, which is the correct point in the flow where payment method choices are presented.

packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)

75-78: Well-implemented prop threading.

The enableCard prop is properly:

  • Typed as optional boolean with clear JSDoc documentation
  • Added to function parameters
  • Passed down to WalletFiatSelection component

The implementation follows React best practices for prop drilling.

Also applies to: 98-98, 257-257

packages/thirdweb/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.tsx (2)

24-24: Proper prop definition with sensible default.

The enableCard prop is correctly typed as optional boolean with a default value of true, which makes sense since card payments should be available by default unless explicitly disabled.

Also applies to: 33-33


131-174: Excellent conditional rendering and improved UX.

The implementation correctly:

  • Conditionally renders the entire card payment section based on enableCard
  • Updates the user-facing text from "Pay with Fiat" to "Pay with Card" for better clarity
  • Maintains consistent styling and layout with existing UI patterns
  • Reuses the existing CreditCardIcon component appropriately

The text change to "Pay with Card" is more intuitive for end users than the technical term "fiat".

Copy link
Contributor

github-actions bot commented Jun 27, 2025

size-limit report 📦

Path Size Loading time (3g) Running time (snapdragon) Total time
thirdweb (esm) 63.11 KB (0%) 1.3 s (0%) 683 ms (+137.87% 🔺) 2 s
thirdweb (cjs) 352.76 KB (0%) 7.1 s (0%) 2.3 s (+8.97% 🔺) 9.3 s
thirdweb (minimal + tree-shaking) 5.72 KB (0%) 115 ms (0%) 107 ms (+619.38% 🔺) 221 ms
thirdweb/chains (tree-shaking) 530 B (0%) 11 ms (0%) 39 ms (+636% 🔺) 49 ms
thirdweb/react (minimal + tree-shaking) 19.59 KB (0%) 392 ms (0%) 133 ms (+146% 🔺) 525 ms

/**
* Whether to enable the "Buy with card" (fiat payment) option
*/
enableCard?: boolean;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What if we do an array instead of litterals

Crypt, card (later we'll have more like ACH, exchange)

Copy link

codecov bot commented Jun 27, 2025

Codecov Report

Attention: Patch coverage is 0% with 138 lines in your changes missing coverage. Please review.

Project coverage is 51.93%. Comparing base (acd5656) to head (abd2103).
Report is 5 commits behind head on main.

Files with missing lines Patch % Lines
...i/Bridge/payment-selection/WalletFiatSelection.tsx 0.00% 115 Missing ⚠️
packages/thirdweb/src/react/web/ui/PayEmbed.tsx 0.00% 14 Missing ⚠️
...b/ui/Bridge/payment-selection/PaymentSelection.tsx 0.00% 4 Missing ⚠️
...web/src/react/web/ui/Bridge/BridgeOrchestrator.tsx 0.00% 2 Missing ⚠️
...ges/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx 0.00% 1 Missing ⚠️
...hirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx 0.00% 1 Missing ⚠️
...dweb/src/react/web/ui/Bridge/TransactionWidget.tsx 0.00% 1 Missing ⚠️

❌ Your patch status has failed because the patch coverage (0.00%) is below the target coverage (80.00%). You can increase the patch coverage or adjust the target coverage.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #7465      +/-   ##
==========================================
- Coverage   51.99%   51.93%   -0.06%     
==========================================
  Files         949      949              
  Lines       64081    64155      +74     
  Branches     4229     4229              
==========================================
+ Hits        33318    33319       +1     
- Misses      30656    30729      +73     
  Partials      107      107              
Flag Coverage Δ
packages 51.93% <0.00%> (-0.06%) ⬇️
Files with missing lines Coverage Δ
...ges/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx 10.29% <0.00%> (-0.08%) ⬇️
...hirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx 11.96% <0.00%> (-0.11%) ⬇️
...dweb/src/react/web/ui/Bridge/TransactionWidget.tsx 13.51% <0.00%> (-0.10%) ⬇️
...web/src/react/web/ui/Bridge/BridgeOrchestrator.tsx 7.87% <0.00%> (-0.08%) ⬇️
...b/ui/Bridge/payment-selection/PaymentSelection.tsx 7.93% <0.00%> (-0.09%) ⬇️
packages/thirdweb/src/react/web/ui/PayEmbed.tsx 35.71% <0.00%> (-3.58%) ⬇️
...i/Bridge/payment-selection/WalletFiatSelection.tsx 7.19% <0.00%> (-0.39%) ⬇️
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Replace boolean enableCard prop with paymentMethods array that accepts ["crypto", "card"] literals. This provides more flexibility for controlling available payment options in BuyWidget, CheckoutWidget, and TransactionWidget.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)
.changeset/dull-breads-start.md (1)

5-5: Prop name in description conflicts with PR objective (enableCard vs paymentMethods).

The PR description and objectives talk about introducing an enableCard boolean, while this changeset message documents a new paymentMethods array prop.
Please double-check the actual implementation and update the changeset so the wording (and therefore the generated release notes) matches the real API surface.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a6b3d14 and 0c4e326.

📒 Files selected for processing (8)
  • .changeset/dull-breads-start.md (1 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx (3 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (2 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (2 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx (2 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (3 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.tsx (3 hunks)
  • packages/thirdweb/src/react/web/ui/PayEmbed.tsx (4 hunks)
🚧 Files skipped from review as they are similar to previous changes (7)
  • packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx
  • packages/thirdweb/src/react/web/ui/PayEmbed.tsx
🧰 Additional context used
🧠 Learnings (1)
.changeset/dull-breads-start.md (1)
Learnt from: MananTank
PR: thirdweb-dev/js#7227
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx:26-26
Timestamp: 2025-05-30T17:14:25.332Z
Learning: The ModuleCardUIProps interface already includes a client prop of type ThirdwebClient, so when components use `Omit<ModuleCardUIProps, "children" | "updateButton">`, they inherit the client prop without needing to add it explicitly.
⏰ Context from checks skipped due to timeout of 90000ms (7)
  • GitHub Check: Size
  • GitHub Check: E2E Tests (pnpm, vite)
  • GitHub Check: E2E Tests (pnpm, esbuild)
  • GitHub Check: E2E Tests (pnpm, webpack)
  • GitHub Check: Unit Tests
  • GitHub Check: Lint Packages
  • GitHub Check: Analyze (javascript)

@@ -393,6 +395,7 @@ export function PayEmbed(props: PayEmbedProps) {
image={metadata?.image}
onSuccess={() => props.payOptions?.onPurchaseSuccess?.()}
theme={theme}
paymentMethods={props.payOptions?.buyWithFiat === false ? ["crypto"] : ["crypto", "card"]}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a way to do fiat only?

@github-actions github-actions bot added the Playground Changes involving the Playground codebase. label Jun 28, 2025
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0c4e326 and e96f4fa.

📒 Files selected for processing (12)
  • apps/playground-web/src/app/connect/pay/components/CodeGen.tsx (1 hunks)
  • apps/playground-web/src/app/connect/pay/components/types.ts (2 hunks)
  • apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx (4 hunks)
  • apps/playground-web/src/app/connect/pay/embed/RightSection.tsx (3 hunks)
  • apps/playground-web/src/app/connect/pay/embed/page.tsx (1 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx (3 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (2 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (2 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx (2 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (5 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.tsx (2 hunks)
  • packages/thirdweb/src/react/web/ui/PayEmbed.tsx (3 hunks)
✅ Files skipped from review due to trivial changes (1)
  • apps/playground-web/src/app/connect/pay/embed/page.tsx
🚧 Files skipped from review as they are similar to previous changes (7)
  • packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.tsx
  • packages/thirdweb/src/react/web/ui/PayEmbed.tsx
🧰 Additional context used
📓 Path-based instructions (3)
`**/components/*`: Add 'className' to the root element of every component for external overrides. Place the file close to its feature: 'feature/components/MyComponent.tsx'.

**/components/*: Add 'className' to the root element of every component for external overrides.
Place the file close to its feature: 'feature/components/MyComponent.tsx'.

📄 Source: CodeRabbit Inference Engine (.cursor/rules/dashboard.mdc)

List of files the instruction was applied to:

  • apps/playground-web/src/app/connect/pay/components/CodeGen.tsx
  • apps/playground-web/src/app/connect/pay/components/types.ts
`**/components/@([A-Z][A-Za-z0-9]*)@(\.tsx|\.client\.tsx)`: Name files after the component in PascalCase; append '.client.tsx' when interactive.

**/components/@([A-Z][A-Za-z0-9]*)@(\.tsx|\.client\.tsx): Name files after the component in PascalCase; append '.client.tsx' when interactive.

📄 Source: CodeRabbit Inference Engine (.cursor/rules/dashboard.mdc)

List of files the instruction was applied to:

  • apps/playground-web/src/app/connect/pay/components/CodeGen.tsx
`**/*.@(ts|tsx)`: Accept a typed 'props' object and export a named function (e.g...

**/*.@(ts|tsx): Accept a typed 'props' object and export a named function (e.g., export function MyComponent()).
Combine class names via 'cn', expose 'className' prop if useful.
Reuse core UI primitives; avoid re-implementing buttons, cards, modals.
Local state or effects live inside; data fetching happens in hooks.
Merge class names with 'cn' from '@/lib/utils' to keep conditional logic readable.
Stick to design-tokens: background ('bg-card'), borders ('border-border'), muted text ('text-muted-foreground') etc.
Use the 'container' class with a 'max-w-7xl' cap for page width consistency.
Spacing utilities ('px-', 'py-', 'gap-*') are preferred over custom margins.
Responsive helpers follow mobile-first ('max-sm', 'md', 'lg', 'xl').
Never hard-code colors – always go through Tailwind variables.
Tailwind CSS is the styling system – avoid inline styles or CSS modules.
Prefix files with 'import "server-only";' so they never end up in the client bundle (for server-only code).

📄 Source: CodeRabbit Inference Engine (.cursor/rules/dashboard.mdc)

List of files the instruction was applied to:

  • apps/playground-web/src/app/connect/pay/components/CodeGen.tsx
  • apps/playground-web/src/app/connect/pay/embed/RightSection.tsx
  • apps/playground-web/src/app/connect/pay/components/types.ts
  • apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx
🧠 Learnings (4)
apps/playground-web/src/app/connect/pay/components/CodeGen.tsx (1)
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-23T13:49:58.951Z
Learning: Accept a typed 'props' object and export a named function for each component to improve type safety and clarity.
apps/playground-web/src/app/connect/pay/embed/RightSection.tsx (1)
Learnt from: MananTank
PR: thirdweb-dev/js#7227
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx:26-26
Timestamp: 2025-05-30T17:14:25.332Z
Learning: The ModuleCardUIProps interface already includes a client prop of type ThirdwebClient, so when components use `Omit<ModuleCardUIProps, "children" | "updateButton">`, they inherit the client prop without needing to add it explicitly.
apps/playground-web/src/app/connect/pay/components/types.ts (5)
Learnt from: gregfromstl
PR: thirdweb-dev/js#7450
File: packages/thirdweb/src/bridge/Webhook.ts:57-81
Timestamp: 2025-06-26T19:46:04.024Z
Learning: In the onramp webhook schema (`packages/thirdweb/src/bridge/Webhook.ts`), the `currencyAmount` field is intentionally typed as `z.number()` while other amount fields use `z.string()` because `currencyAmount` represents fiat currency amounts in decimals (like $10.50), whereas other amount fields represent token amounts in wei (very large integers that benefit from bigint representation). The different naming convention (`currencyAmount` vs `amount`) reflects this intentional distinction.
Learnt from: MananTank
PR: thirdweb-dev/js#7227
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx:26-26
Timestamp: 2025-05-30T17:14:25.332Z
Learning: The ModuleCardUIProps interface already includes a client prop of type ThirdwebClient, so when components use `Omit<ModuleCardUIProps, "children" | "updateButton">`, they inherit the client prop without needing to add it explicitly.
Learnt from: MananTank
PR: thirdweb-dev/js#7356
File: apps/nebula/src/app/not-found.tsx:1-1
Timestamp: 2025-06-17T18:30:52.976Z
Learning: In the thirdweb/js project, the React namespace is available for type annotations (like React.FC) without needing to explicitly import React. This is project-specific configuration that differs from typical TypeScript/React setups.
Learnt from: MananTank
PR: thirdweb-dev/js#7298
File: apps/dashboard/src/app/nebula-app/move-funds/move-funds.tsx:424-424
Timestamp: 2025-06-06T23:46:08.795Z
Learning: The thirdweb project has an ESLint rule that restricts direct usage of `defineChain`. When it's necessary to use `defineChain` directly, it's acceptable to disable the rule with `// eslint-disable-next-line no-restricted-syntax`.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: UI primitives should be imported from @/components/ui/*.
apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx (5)
Learnt from: MananTank
PR: thirdweb-dev/js#7356
File: apps/nebula/src/app/not-found.tsx:1-1
Timestamp: 2025-06-17T18:30:52.976Z
Learning: In the thirdweb/js project, the React namespace is available for type annotations (like React.FC) without needing to explicitly import React. This is project-specific configuration that differs from typical TypeScript/React setups.
Learnt from: MananTank
PR: thirdweb-dev/js#7298
File: apps/dashboard/src/app/nebula-app/move-funds/move-funds.tsx:424-424
Timestamp: 2025-06-06T23:46:08.795Z
Learning: The thirdweb project has an ESLint rule that restricts direct usage of `defineChain`. When it's necessary to use `defineChain` directly, it's acceptable to disable the rule with `// eslint-disable-next-line no-restricted-syntax`.
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-06-25T02:13:08.257Z
Learning: UI primitives should be imported from @/components/ui/*.
Learnt from: MananTank
PR: thirdweb-dev/js#7227
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx:26-26
Timestamp: 2025-05-30T17:14:25.332Z
Learning: The ModuleCardUIProps interface already includes a client prop of type ThirdwebClient, so when components use `Omit<ModuleCardUIProps, "children" | "updateButton">`, they inherit the client prop without needing to add it explicitly.
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-06-23T13:49:58.951Z
Learning: Reuse core UI primitives and avoid re-implementing common elements like buttons, cards, or modals.
⏰ Context from checks skipped due to timeout of 90000ms (8)
  • GitHub Check: E2E Tests (pnpm, webpack)
  • GitHub Check: Size
  • GitHub Check: E2E Tests (pnpm, esbuild)
  • GitHub Check: E2E Tests (pnpm, vite)
  • GitHub Check: Unit Tests
  • GitHub Check: Build Packages
  • GitHub Check: Lint Packages
  • GitHub Check: Analyze (javascript)
🔇 Additional comments (4)
apps/playground-web/src/app/connect/pay/components/CodeGen.tsx (1)

76-76: LGTM! Conditional prop generation is well implemented.

The logic correctly checks for both existence and non-empty array before including the paymentMethods prop in the generated JSX. Using JSON.stringify is appropriate for code generation, and the formatting maintains readability.

apps/playground-web/src/app/connect/pay/embed/RightSection.tsx (1)

63-63: LGTM! Consistent prop passing across all widget types.

The paymentMethods prop is correctly passed to all three widget components (BuyWidget, CheckoutWidget, and TransactionWidget) following the same pattern as other props. This maintains consistency in the implementation.

Also applies to: 85-85, 100-100

apps/playground-web/src/app/connect/pay/components/types.ts (2)

1-3: LGTM! Improved import specificity.

Moving to more specific imports ("thirdweb/chains" for Chain and "thirdweb/utils" for Address) is a good practice that helps with tree-shaking and makes dependencies clearer.


27-27: LGTM! Well-defined type constraint for payment methods.

The paymentMethods type correctly constrains the array to only contain "crypto" or "card" values, ensuring type safety and preventing invalid payment method configurations.

Comment on lines +168 to +225
{/* Payment Methods */}
<div className="flex flex-col gap-3 pt-4">
<Label>Payment Methods</Label>
<div className="flex gap-4">
<div className="flex items-center space-x-2">
<Checkbox
checked={payOptions.paymentMethods.includes(
"crypto",
)}
id={cryptoPaymentId}
onCheckedChange={(checked) => {
setOptions((v) => ({
...v,
payOptions: {
...v.payOptions,
paymentMethods: checked
? [
...v.payOptions.paymentMethods.filter(
(m) => m !== "crypto",
),
"crypto",
]
: v.payOptions.paymentMethods.filter(
(m) => m !== "crypto",
),
},
}));
}}
/>
<Label htmlFor={cryptoPaymentId}>Crypto</Label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
checked={payOptions.paymentMethods.includes("card")}
id={cardPaymentId}
onCheckedChange={(checked) => {
setOptions((v) => ({
...v,
payOptions: {
...v.payOptions,
paymentMethods: checked
? [
...v.payOptions.paymentMethods.filter(
(m) => m !== "card",
),
"card",
]
: v.payOptions.paymentMethods.filter(
(m) => m !== "card",
),
},
}));
}}
/>
<Label htmlFor={cardPaymentId}>Card</Label>
</div>
</div>
</div>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Eliminate code duplication by extracting payment methods UI.

The payment methods selection UI and logic is duplicated between the buy and checkout sections. This violates the DRY principle and makes maintenance harder.

Consider extracting this into a reusable component:

function PaymentMethodsSelector({ 
  paymentMethods, 
  onPaymentMethodsChange,
  cryptoId,
  cardId 
}: {
  paymentMethods: ("crypto" | "card")[];
  onPaymentMethodsChange: (methods: ("crypto" | "card")[]) => void;
  cryptoId: string;
  cardId: string;
}) {
  const handleMethodChange = (method: "crypto" | "card", checked: boolean) => {
    const newMethods = checked 
      ? [...new Set([...paymentMethods, method])]
      : paymentMethods.filter(m => m !== method);
    onPaymentMethodsChange(newMethods);
  };

  return (
    <div className="flex flex-col gap-3">
      <Label>Payment Methods</Label>
      <div className="flex gap-4">
        <div className="flex items-center space-x-2">
          <Checkbox
            checked={paymentMethods.includes("crypto")}
            id={cryptoId}
            onCheckedChange={(checked) => handleMethodChange("crypto", !!checked)}
          />
          <Label htmlFor={cryptoId}>Crypto</Label>
        </div>
        <div className="flex items-center space-x-2">
          <Checkbox
            checked={paymentMethods.includes("card")}
            id={cardId}
            onCheckedChange={(checked) => handleMethodChange("card", !!checked)}
          />
          <Label htmlFor={cardId}>Card</Label>
        </div>
      </div>
    </div>
  );
}

This approach also simplifies the checkbox change logic by using Set to prevent duplicates naturally.

Also applies to: 315-372

🤖 Prompt for AI Agents
In apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx around lines
168 to 225, the payment methods UI and logic are duplicated, violating the DRY
principle. Extract this repeated UI and logic into a reusable
PaymentMethodsSelector component that accepts paymentMethods,
onPaymentMethodsChange, cryptoId, and cardId as props. Implement a single
handler inside this component to manage checkbox changes using a Set to avoid
duplicates. Replace the duplicated code blocks with this new component and apply
the same refactor to lines 315 to 372.

Comment on lines +57 to +58
const cryptoPaymentId = useId();
const cardPaymentId = useId();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

ID collision issue: Generate unique IDs for each section.

The same checkbox IDs (cryptoPaymentId, cardPaymentId) are being reused in both the "buy" and "checkout" sections, which violates the requirement that DOM IDs be unique and could cause accessibility issues.

Generate separate IDs for each section:

  const cryptoPaymentId = useId();
  const cardPaymentId = useId();
+ const cryptoPaymentCheckoutId = useId();
+ const cardPaymentCheckoutId = useId();

Then use the checkout-specific IDs in the checkout section (lines 324, 349).

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const cryptoPaymentId = useId();
const cardPaymentId = useId();
const cryptoPaymentId = useId();
const cardPaymentId = useId();
const cryptoPaymentCheckoutId = useId();
const cardPaymentCheckoutId = useId();
🤖 Prompt for AI Agents
In apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx around lines 57
to 58, the IDs cryptoPaymentId and cardPaymentId are reused in both "buy" and
"checkout" sections causing ID collisions. To fix this, generate separate unique
IDs for the checkout section, for example checkoutCryptoPaymentId and
checkoutCardPaymentId, and replace the IDs used in the checkout section at lines
324 and 349 with these new IDs to ensure all DOM IDs are unique.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
packages Playground Changes involving the Playground codebase. SDK Involves changes to the thirdweb SDK
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants