Skip to content

Feature: UB Widget Tracking and Docs #7426

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 12 commits into from
Jun 24, 2025

Conversation

gregfromstl
Copy link
Member

@gregfromstl gregfromstl commented Jun 24, 2025


PR-Codex overview

This PR focuses on deprecating the PayEmbed component in favor of the BuyWidget, along with other related updates and improvements across various components in the codebase.

Detailed summary

  • Removed PayEmbed component and related documentation.
  • Introduced BuyWidget component with updated functionality.
  • Updated references in documentation and code to reflect the use of BuyWidget.
  • Enhanced event tracking for payment-related actions.
  • Adjusted components to utilize new client structure and props.

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

Summary by CodeRabbit

  • New Features

    • Introduced modular payment UI components: BuyWidget, CheckoutWidget, and TransactionWidget, each with focused functionality and improved customization options.
  • Bug Fixes

    • Enhanced analytics and event tracking across payment and transaction widgets for improved insight.
  • Refactor

    • Replaced the deprecated PayEmbed component and related UI with the new widget components in both app and documentation.
    • Simplified the BuyFundsSection for a more streamlined user experience.
  • Documentation

    • Updated and reorganized documentation to reflect new widget components and remove references to the deprecated PayEmbed.
    • Improved code examples and usage guides for the new payment widgets.
  • Chores

    • Removed obsolete components, icons, and documentation related to PayEmbed and outdated UI elements.
    • Deprecated the PayEmbed feature in the thirdweb package.

@gregfromstl gregfromstl requested review from a team as code owners June 24, 2025 00:04
Copy link

linear bot commented Jun 24, 2025

Copy link

changeset-bot bot commented Jun 24, 2025

🦋 Changeset detected

Latest commit: 70d7fac

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 24, 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 24, 2025 7:37pm
nebula ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 24, 2025 7:37pm
thirdweb_playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 24, 2025 7:37pm
thirdweb-www ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 24, 2025 7:37pm
wallet-ui ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 24, 2025 7:37pm

Copy link
Contributor

coderabbitai bot commented Jun 24, 2025

Walkthrough

This change deprecates the PayEmbed component in favor of three new modular payment widgets: BuyWidget, CheckoutWidget, and TransactionWidget. All relevant documentation, examples, and dashboard code are updated to use the new widgets. Analytics tracking is added throughout the new components, and related icons, modal components, and obsolete documentation are removed.

Changes

Files/Groups Change Summary
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/BuyFundsSection.tsx Replaced custom payment UI and modal with the new BuyWidget component, removing all previous related UI elements and imports.
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/BuyFundsSection.tsx Added new client component BuyFundsSection rendering BuyWidget with props for chain and client, using flexbox for layout.
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/PayModal.tsx Deleted the PayModalButton component that rendered a themed modal dialog with PayEmbed.
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/icons/CreditCardIcon.tsx Deleted the CreditCardIcon React component.
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsx Changed import of BuyFundsSection from server to client components path.
apps/portal/public/llms-full.txt Updated documentation to remove PayEmbed and introduce BuyWidget, CheckoutWidget, and TransactionWidget with new focused APIs and usage examples.
apps/portal/src/app/pay/customization/payembed/page.mdx Deleted documentation page for customizing the PayEmbed component.
apps/portal/src/app/react/v5/adapters/page.mdx Updated references from PayEmbed to BuyWidget in documentation.
apps/portal/src/app/react/v5/pay/fund-wallets/page.mdx Updated documentation and code examples to use BuyWidget instead of PayEmbed.
apps/portal/src/app/react/v5/pay/transaction/page.mdx Removed the "Usage with PayEmbed" section, added "Usage with TransactionWidget", and updated transaction documentation.
apps/portal/src/app/references/components/TDoc/utils/getSidebarLinkgroups.ts Removed the @buyCrypto tag and sidebar group from sidebar link groups.
packages/thirdweb/src/bridge/Buy.ts Removed @beta JSDoc annotations from exported functions and adjusted union type formatting.
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx
.../CheckoutWidget.tsx
.../TransactionWidget.tsx
Added analytics tracking on render using trackPayEvent and useQuery. Updated JSDoc tags and passed additional props to UnsupportedTokenScreen. Minor formatting changes.
packages/thirdweb/src/react/web/ui/Bridge/ErrorBanner.tsx Added required client prop and analytics tracking on error display. Updated function and prop signatures.
packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx Added required mode prop and analytics tracking on quote loading. Updated function and prop signatures.
packages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsx Extended props to include required client and optional tokenAddress. Added analytics tracking on unsupported token display. Updated function and prop signatures.
packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx Added analytics tracking on payment details display for certain quote types.
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx Added analytics tracking on payment selection display.
packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx Added required client prop and analytics tracking on success screen display. Updated function and prop signatures.
packages/thirdweb/src/react/web/ui/PayEmbed.tsx Marked PayEmbed as deprecated in JSDoc, recommended using new widgets. Added onSuccess callback support for all widget usages. Minor formatting change.
packages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsx Updated stories to pass a client prop to ErrorBanner.
packages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsx Updated all stories to pass a client prop to SuccessScreen.
packages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsx Updated all stories to pass a client prop to UnsupportedTokenScreen.
packages/thirdweb/test/src/test-clients.js Added and exported a new TEST_CLIENT instance for testing, with conditional configuration based on environment variables.
packages/thirdweb/tsdoc.json Removed the @buyCrypto TSDoc tag and its definition from configuration.
.changeset/wild-cases-ask.md Added a changeset describing the deprecation of the PayEmbed feature in the thirdweb package.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant BuyWidget
    participant CheckoutWidget
    participant TransactionWidget
    participant Analytics

    User->>BuyWidget: Interact to buy tokens
    BuyWidget->>Analytics: trackPayEvent("ub:ui:buy_widget:render", ...)
    Note over BuyWidget: On unsupported token
    BuyWidget->>Analytics: trackPayEvent("ub:ui:unsupported_token", ...)
    Note over BuyWidget: On success
    BuyWidget->>User: onSuccess callback

    User->>CheckoutWidget: Interact to pay seller
    CheckoutWidget->>Analytics: trackPayEvent("ub:ui:checkout_widget:render", ...)
    Note over CheckoutWidget: On unsupported token
    CheckoutWidget->>Analytics: trackPayEvent("ub:ui:unsupported_token", ...)
    Note over CheckoutWidget: On success
    CheckoutWidget->>User: onSuccess callback

    User->>TransactionWidget: Interact to execute transaction
    TransactionWidget->>Analytics: trackPayEvent("ub:ui:transaction_widget:render", ...)
    Note over TransactionWidget: On unsupported token
    TransactionWidget->>Analytics: trackPayEvent("ub:ui:unsupported_token", ...)
    Note over TransactionWidget: On success
    TransactionWidget->>User: onSuccess callback
Loading

Possibly related PRs

  • thirdweb-dev/js#7390: Refactors BuyWidget and related components to accept amount as a decimal string, directly affecting BuyWidget's input handling.
  • thirdweb-dev/js#7226: Adds and propagates client prop usage across dashboard components including PayModalButton and BuyFundsSection, related to client handling in payment UI components.
  • thirdweb-dev/js#7121: Introduces payment link support in PayEmbed and related components, connected through payment UI and PayEmbed modifications.

Suggested labels

Playground

Suggested reviewers

  • jnsdls

Warning

Review ran into problems

🔥 Problems

Errors were encountered while retrieving linked issues.

Errors (1)
  • TEAM-0000: Entity not found: Issue - Could not find referenced Issue.
✨ Finishing Touches
  • 📝 Generate Docstrings

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • 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 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 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 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 for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@github-actions github-actions bot added Dashboard Involves changes to the Dashboard. Portal Involves changes to the Portal (docs) codebase. packages labels Jun 24, 2025
Copy link
Contributor

graphite-app bot commented Jun 24, 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.

@github-actions github-actions bot added the SDK Involves changes to the thirdweb SDK label Jun 24, 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: 0

🧹 Nitpick comments (7)
packages/thirdweb/test/src/test-clients.js (1)

10-10: Consider using a more descriptive test client ID.

The hardcoded "TEST" client ID could be more descriptive to clearly indicate its purpose in test environments.

-        clientId: "TEST",
+        clientId: "test-client-id",
apps/portal/src/app/react/v5/adapters/page.mdx (2)

87-87: Fix grammar and style issues in documentation.

The static analysis correctly identified grammar and style improvements needed in this sentence.

-You can use the thirdweb SDK within a wagmi application by setting the wagmi connected account as the thirdweb 'active wallet'. After that, you can use all of the react components and hooks normally, including `BuyWidget`, `TransactionButton`, etc.
+You can use the thirdweb SDK within a wagmi application by setting the wagmi connected account as the thirdweb 'active wallet'. After that, you can use all React components and hooks normally, including `BuyWidget`, `TransactionButton`, etc.

129-129: Fix grammar and style issues in documentation.

Similar grammar and style improvements needed here as well.

-Similarly, you can use the thirdweb SDK with privy by setting the privy wallet as the thirdweb 'active wallet'. After that, you can use all of the react components, functions and hooks normally, including `BuyWidget`, `TransactionButton`, etc.
+Similarly, you can use the thirdweb SDK with privy by setting the privy wallet as the thirdweb 'active wallet'. After that, you can use all React components, functions and hooks normally, including `BuyWidget`, `TransactionButton`, etc.
packages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsx (1)

30-30: Consider using the TEST_CLIENT for consistency.

Since there's already a TEST_CLIENT exported from the test utilities, consider using it for consistency across test/story contexts.

+import { TEST_CLIENT } from "../../test/src/test-clients.js";
       <ErrorBanner
-        client={createThirdwebClient({ clientId: "test" })}
+        client={TEST_CLIENT}
         {...componentProps}
       />
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)

101-111: Consider using useEffect instead of useQuery for side effects.

While this works, useQuery is typically used for data fetching rather than triggering side effects like analytics tracking. Consider using useEffect for better semantic clarity:

-  useQuery({
-    queryFn: () => {
-      trackPayEvent({
-        client,
-        event: "payment_selection",
-        toChainId: destinationToken.chainId,
-        toToken: destinationToken.address,
-      });
-    },
-    queryKey: ["payment_selection"],
-  });
+  useEffect(() => {
+    trackPayEvent({
+      client,
+      event: "payment_selection",
+      toChainId: destinationToken.chainId,
+      toToken: destinationToken.address,
+    });
+  }, [client, destinationToken.chainId, destinationToken.address]);
packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (1)

73-87: Consider using useEffect instead of useQuery for side effects.

Similar to other analytics tracking implementations, useQuery is being used for side effects rather than data fetching. Consider using useEffect for better semantic clarity:

-  useQuery({
-    queryFn: () => {
-      if (preparedQuote.type === "buy" || preparedQuote.type === "sell") {
-        trackPayEvent({
-          chainId: preparedQuote.intent.originChainId,
-          client,
-          event: "payment_details",
-          fromToken: preparedQuote.intent.originTokenAddress,
-          toChainId: preparedQuote.intent.destinationChainId,
-          toToken: preparedQuote.intent.destinationTokenAddress,
-        });
-      }
-    },
-    queryKey: ["payment_details", preparedQuote.type],
-  });
+  useEffect(() => {
+    if (preparedQuote.type === "buy" || preparedQuote.type === "sell") {
+      trackPayEvent({
+        chainId: preparedQuote.intent.originChainId,
+        client,
+        event: "payment_details",
+        fromToken: preparedQuote.intent.originTokenAddress,
+        toChainId: preparedQuote.intent.destinationChainId,
+        toToken: preparedQuote.intent.destinationTokenAddress,
+      });
+    }
+  }, [
+    preparedQuote.type,
+    preparedQuote.intent.originChainId,
+    preparedQuote.intent.destinationChainId,
+    preparedQuote.intent.originTokenAddress,
+    preparedQuote.intent.destinationTokenAddress,
+    client,
+  ]);

The conditional logic to only track "buy" or "sell" types is well-implemented.

apps/portal/public/llms-full.txt (1)

1701-1719: presetOptions feels unnecessarily rigid

The prop is documented as a fixed-length tuple [number, number, number].
That prevents callers from providing either fewer or more than three quick-select amounts, and does not align with the typical UX pattern where the number of presets is arbitrary.

-  presetOptions?: [number, number, number];
+  /**
+   * Pre-defined amounts shown as quick-select buttons.
+   * Can contain any number of entries (≥ 1).
+   */
+  presetOptions?: number[];
📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between c26be2d and e7327e2.

⛔ Files ignored due to path filters (1)
  • packages/thirdweb/test/src/test-clients.js.map is excluded by !**/*.map
📒 Files selected for processing (25)
  • .changeset/wild-cases-ask.md (1 hunks)
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/BuyFundsSection.tsx (1 hunks)
  • apps/portal/public/llms-full.txt (2 hunks)
  • apps/portal/src/app/pay/customization/payembed/page.mdx (0 hunks)
  • apps/portal/src/app/react/v5/adapters/page.mdx (2 hunks)
  • apps/portal/src/app/react/v5/pay/fund-wallets/page.mdx (1 hunks)
  • apps/portal/src/app/react/v5/pay/transaction/page.mdx (0 hunks)
  • apps/portal/src/app/references/components/TDoc/utils/getSidebarLinkgroups.ts (0 hunks)
  • packages/thirdweb/src/bridge/Buy.ts (1 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx (2 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (5 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (5 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/ErrorBanner.tsx (2 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx (2 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx (5 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsx (2 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (2 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (2 hunks)
  • packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx (3 hunks)
  • packages/thirdweb/src/react/web/ui/PayEmbed.tsx (5 hunks)
  • packages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsx (2 hunks)
  • packages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsx (9 hunks)
  • packages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsx (5 hunks)
  • packages/thirdweb/test/src/test-clients.js (1 hunks)
  • packages/thirdweb/tsdoc.json (1 hunks)
💤 Files with no reviewable changes (3)
  • apps/portal/src/app/references/components/TDoc/utils/getSidebarLinkgroups.ts
  • apps/portal/src/app/react/v5/pay/transaction/page.mdx
  • apps/portal/src/app/pay/customization/payembed/page.mdx
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.@(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. ...

**/*.@(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).

  • packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx
  • packages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsx
  • packages/thirdweb/src/bridge/Buy.ts
  • packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx
  • packages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
  • apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/BuyFundsSection.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/ErrorBanner.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx
  • packages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsx
  • packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx
  • packages/thirdweb/src/react/web/ui/PayEmbed.tsx
🧠 Learnings (1)
packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.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: Use React Query ('@tanstack/react-query') for all client-side data fetching to leverage caching and query management.
🧬 Code Graph Analysis (8)
packages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsx (1)
packages/thirdweb/src/react/web/ui/Bridge/ErrorBanner.tsx (1)
  • ErrorBanner (31-106)
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
packages/thirdweb/src/analytics/track/pay.ts (1)
  • trackPayEvent (8-39)
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (5)
packages/thirdweb/src/react/web/ui/ConnectWallet/locale/getConnectLocale.ts (1)
  • useConnectLocale (42-51)
packages/thirdweb/src/analytics/track/pay.ts (1)
  • trackPayEvent (8-39)
packages/thirdweb/src/exports/utils.ts (1)
  • checksumAddress (146-146)
packages/thirdweb/src/exports/thirdweb.ts (1)
  • NATIVE_TOKEN_ADDRESS (31-31)
packages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsx (1)
  • UnsupportedTokenScreen (25-101)
packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (1)
packages/thirdweb/src/analytics/track/pay.ts (1)
  • trackPayEvent (8-39)
packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx (3)
packages/thirdweb/src/react/web/ui/ConnectWallet/locale/getConnectLocale.ts (1)
  • useConnectLocale (42-51)
packages/thirdweb/src/analytics/track/pay.ts (1)
  • trackPayEvent (8-39)
packages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsx (1)
  • UnsupportedTokenScreen (25-101)
packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx (1)
packages/thirdweb/src/analytics/track/pay.ts (1)
  • trackPayEvent (8-39)
packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx (1)
packages/thirdweb/src/analytics/track/pay.ts (1)
  • trackPayEvent (8-39)
packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (3)
packages/thirdweb/src/react/web/ui/ConnectWallet/locale/getConnectLocale.ts (1)
  • useConnectLocale (42-51)
packages/thirdweb/src/analytics/track/pay.ts (1)
  • trackPayEvent (8-39)
packages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsx (1)
  • UnsupportedTokenScreen (25-101)
🪛 LanguageTool
apps/portal/src/app/react/v5/adapters/page.mdx

[style] ~87-~87: Consider removing “of” to be more concise
Context: ...active wallet'. After that, you can use all of the react components and hooks normally, in...

(ALL_OF_THE)


[grammar] ~87-~87: “React” is a proper noun and needs to be capitalized.
Context: ...et'. After that, you can use all of the react components and hooks normally, includin...

(A_GOOGLE)


[style] ~129-~129: Consider removing “of” to be more concise
Context: ...active wallet'. After that, you can use all of the react components, functions and hooks n...

(ALL_OF_THE)


[grammar] ~129-~129: “React” is a proper noun and needs to be capitalized.
Context: ...et'. After that, you can use all of the react components, functions and hooks normall...

(A_GOOGLE)

🪛 Gitleaks (8.26.0)
apps/portal/public/llms-full.txt

1635-1635: 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 (8)
  • GitHub Check: Size
  • GitHub Check: E2E Tests (pnpm, webpack)
  • GitHub Check: E2E Tests (pnpm, esbuild)
  • GitHub Check: Unit Tests
  • GitHub Check: E2E Tests (pnpm, vite)
  • GitHub Check: Build Packages
  • GitHub Check: Lint Packages
  • GitHub Check: Analyze (javascript)
🔇 Additional comments (40)
packages/thirdweb/test/src/test-clients.js (1)

1-15: LGTM! Well-structured test client setup with appropriate fallbacks.

The conditional configuration logic correctly handles both authenticated (with secret key) and public gateway scenarios for testing. The use of environment variables provides flexibility for different testing environments.

.changeset/wild-cases-ask.md (1)

1-6: LGTM! Proper changeset format for deprecation.

The changeset correctly follows the standard format with appropriate YAML frontmatter and clear deprecation message. Using a patch version is appropriate for deprecation without breaking changes.

apps/portal/src/app/react/v5/adapters/page.mdx (1)

87-87: LGTM! Correct component name updates.

The replacement of PayEmbed with BuyWidget in the documentation examples correctly reflects the component deprecation and aligns with the broader refactoring effort.

Also applies to: 129-129

packages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsx (1)

2-2: LGTM! Correctly provides required client prop for ErrorBanner.

The addition of the client prop with inline createThirdwebClient call properly supports the ErrorBanner component's analytics tracking functionality. The hardcoded "test" clientId is appropriate for storybook stories.

Also applies to: 29-32

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

220-220: LGTM! Correctly threads client prop to child components.

The addition of client={client} to both ErrorBanner and SuccessScreen components properly enables their analytics tracking functionality while maintaining the existing component structure and logic flow.

Also applies to: 336-336

packages/thirdweb/src/bridge/Buy.ts (1)

166-172: LGTM: Clean formatting improvement.

The union type formatting has been improved for better readability while maintaining the same functionality.

packages/thirdweb/tsdoc.json (1)

84-84: LGTM: Consistent formatting.

The formatting change improves readability and maintains consistency with the rest of the configuration.

packages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsx (2)

3-3: LGTM: Proper test client setup.

The addition of createThirdwebClient and TEST_CLIENT constant follows the standard pattern for providing client context in storybook stories.

Also applies to: 11-11


63-63: LGTM: Consistent client prop addition.

All story variants now properly receive the client prop, enabling the analytics functionality in the component.

Also applies to: 80-80, 97-97, 114-114

apps/portal/src/app/react/v5/pay/fund-wallets/page.mdx (1)

31-50: Documentation update looks good!

The transition from PayEmbed to BuyWidget is properly documented with correct import statements, updated API usage, and appropriate link references.

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/BuyFundsSection.tsx (1)

1-21: Excellent simplification!

The component is now much cleaner and more maintainable by delegating the complex UI logic to the specialized BuyWidget. The props are properly typed and passed through correctly.

packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx (1)

114-132: Analytics tracking implemented correctly.

The tracking implementation captures appropriate event data including chain IDs and token addresses. Note that using useQuery purely for side effects is unconventional but functional - consider if this pattern should be standardized across the codebase.

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

270-280: Analytics tracking properly implemented.

The tracking captures the essential widget render event with appropriate metadata. Consistent with the pattern used across other bridge components.


357-363: UnsupportedTokenScreen props updated correctly.

The component now properly receives the client and tokenAddress props required for the new analytics tracking functionality.

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

1-4: Proper imports for analytics tracking.

The necessary imports for React Query and analytics tracking are correctly added.


17-18: New props properly typed.

The client prop is correctly typed as required, and tokenAddress as optional, which aligns with the component's usage patterns.


30-40: Analytics tracking implementation is consistent.

The tracking follows the same pattern as other bridge components, capturing the appropriate event data for unsupported tokens.

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

3-5: LGTM: Clean analytics imports

The imports for React Query and analytics tracking are properly organized.


28-28: LGTM: Well-documented client prop

The client prop addition follows the established pattern and maintains type safety.


41-50: LGTM: Proper analytics implementation

The useQuery hook correctly tracks error events and uses the userMessage in the query key for proper re-execution when the error changes. The implementation follows the established pattern seen in other components.

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

4-4: LGTM: Analytics import added

Proper import of the tracking function for widget analytics.


271-271: LGTM: JSDoc tag updated for widget categorization

The update from @bridge @beta @react to @bridge Widgets correctly reflects the new widget-based organization.


277-287: LGTM: Consistent analytics tracking implementation

The analytics tracking follows the same pattern as other components, correctly tracking transaction widget renders with relevant context (chain ID and token address).


345-351: Verify UnsupportedTokenScreen prop compatibility

The UnsupportedTokenScreen is now receiving client and tokenAddress props. Ensure these props are properly handled in the UnsupportedTokenScreen component.

#!/bin/bash
# Verify UnsupportedTokenScreen component accepts the new props
ast-grep --pattern $'export function UnsupportedTokenScreen($_) {
  $$$
}'
packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx (3)

3-6: LGTM: Proper imports for analytics

Clean import additions for React Query and analytics tracking with correct type imports.


44-44: LGTM: Client prop addition

The client prop is properly typed and documented in the interface.


60-74: LGTM: Conditional analytics tracking

The analytics implementation correctly:

  • Only tracks for "buy" or "sell" transaction types
  • Includes comprehensive transaction details (origin/destination chains and tokens)
  • Uses the quote type in the query key for proper re-execution
packages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsx (3)

3-3: LGTM: Client import for stories

Proper import of createThirdwebClient for storybook stories.


19-19: LGTM: Test client for storybook

Creating a test client with a fixed "test" clientId is appropriate for storybook stories and testing scenarios.


132-132: LGTM: Consistent client prop across all stories

All story configurations are properly updated with the TEST_CLIENT, ensuring consistency and preventing runtime errors in storybook.

Also applies to: 142-142, 152-152, 170-170, 182-182, 203-203, 218-218

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

310-310: LGTM: Proper deprecation notice

The deprecation JSDoc tag clearly directs users to the new specialized widgets (BuyWidget, CheckoutWidget, TransactionWidget) which is helpful for migration.


361-361: LGTM: Consistent onSuccess callback integration

The onSuccess callbacks are properly integrated across all three widget implementations:

  • BuyWidget (line 361)
  • CheckoutWidget (line 379)
  • TransactionWidget (line 395)

This ensures backward compatibility while users migrate to the new widgets.

Also applies to: 379-379, 395-395


516-519: LGTM: Minor formatting improvement

The indentation adjustment to the autoConnect type definition improves readability without changing the type semantics.

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

4-4: LGTM! Analytics tracking import added correctly.

The import statement follows the correct path structure and aligns with the analytics tracking implementation below.


253-263: LGTM! Analytics tracking implementation is appropriate.

The useQuery hook correctly tracks the checkout widget render event with relevant parameters (client, event, toChainId, toToken). The static query key ensures the tracking event fires only once per component mount, which is appropriate for a render event.


247-247: LGTM! JSDoc updated to reflect widget classification.

The JSDoc annotation change from @bridge @beta @react to @bridge Widgets correctly reflects the new widget-based approach mentioned in the PR summary.


320-326: LGTM! UnsupportedTokenScreen props updated correctly.

The component now correctly passes the required client and tokenAddress props to UnsupportedTokenScreen, which aligns with the changes shown in the relevant code snippets where this component now uses these props for analytics tracking.


175-183: LGTM! Minor formatting improvements.

The type definition formatting changes improve code readability without affecting functionality.

Also applies to: 421-424

apps/portal/public/llms-full.txt (2)

1888-1910: Please double-check the TransactionWidget prop list

The following props look like copy-overs from BuyWidget/CheckoutWidget and may not be relevant for an arbitrary transaction flow:

  • paymentLinkId
  • supportedTokens
  • connectOptions (named for checkout, not transaction)
  • purchaseData

If they really are required, add a brief note explaining their effect in the transaction context; otherwise consider removing them to avoid API confusion.


1629-1636: Gitleaks “API key” warning is a false positive

0xA0b86a33E6417E4df2057B2d3C6d9F7cc11b0a70 is an ERC-20 contract address used as an example, not a secret.
No action required; just confirming the signal can be ignored.

Copy link
Contributor

github-actions bot commented Jun 24, 2025

size-limit report 📦

Path Size Loading time (3g) Running time (snapdragon) Total time
thirdweb (esm) 62.56 KB (0%) 1.3 s (0%) 325 ms (+174.01% 🔺) 1.6 s
thirdweb (cjs) 350.74 KB (0%) 7.1 s (0%) 1.1 s (+10.74% 🔺) 8.1 s
thirdweb (minimal + tree-shaking) 5.72 KB (0%) 115 ms (0%) 150 ms (+2215.02% 🔺) 264 ms
thirdweb/chains (tree-shaking) 530 B (0%) 11 ms (0%) 80 ms (+2980.94% 🔺) 90 ms
thirdweb/react (minimal + tree-shaking) 19.61 KB (0%) 393 ms (0%) 158 ms (+932.07% 🔺) 550 ms

Copy link

codecov bot commented Jun 24, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 52.08%. Comparing base (bbff67d) to head (70d7fac).
Report is 1 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #7426   +/-   ##
=======================================
  Coverage   52.08%   52.08%           
=======================================
  Files         947      947           
  Lines       63636    63631    -5     
  Branches     4216     4216           
=======================================
- Hits        33146    33145    -1     
+ Misses      30384    30380    -4     
  Partials      106      106           
Flag Coverage Δ *Carryforward flag
packages 52.08% <ø> (+<0.01%) ⬆️ Carriedforward from bbff67d

*This pull request uses carry forward flags. Click here to find out more.

Files with missing lines Coverage Δ
packages/thirdweb/src/bridge/Buy.ts 92.18% <ø> (ø)
...web/src/react/web/ui/Bridge/BridgeOrchestrator.tsx 8.05% <ø> (ø)
...ges/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx 11.11% <ø> (+0.09%) ⬆️
...hirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx 13.26% <ø> (+0.13%) ⬆️
...s/thirdweb/src/react/web/ui/Bridge/ErrorBanner.tsx 13.20% <ø> (-1.61%) ⬇️
...s/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx 7.50% <ø> (ø)
...dweb/src/react/web/ui/Bridge/TransactionWidget.tsx 15.62% <ø> (+0.16%) ⬆️
...src/react/web/ui/Bridge/UnsupportedTokenScreen.tsx 14.28% <ø> (+0.28%) ⬆️
...t/web/ui/Bridge/payment-details/PaymentDetails.tsx 3.76% <ø> (ø)
...b/ui/Bridge/payment-selection/PaymentSelection.tsx 7.47% <ø> (ø)
... and 2 more
🚀 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Dashboard Involves changes to the Dashboard. packages Portal Involves changes to the Portal (docs) codebase. SDK Involves changes to the thirdweb SDK
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants