-
Notifications
You must be signed in to change notification settings - Fork 559
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
Feature: UB Widget Tracking and Docs #7426
Conversation
🦋 Changeset detectedLatest commit: 70d7fac The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis change deprecates the Changes
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
Possibly related PRs
Suggested labels
Suggested reviewers
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed 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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. |
There was a problem hiding this 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 usinguseEffect
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 usinguseEffect
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 rigidThe 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
⛔ 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
withBuyWidget
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 inlinecreateThirdwebClient
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 bothErrorBanner
andSuccessScreen
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
andTEST_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
toBuyWidget
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
andtokenAddress
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, andtokenAddress
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 importsThe imports for React Query and analytics tracking are properly organized.
28-28
: LGTM: Well-documented client propThe client prop addition follows the established pattern and maintains type safety.
41-50
: LGTM: Proper analytics implementationThe 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 addedProper import of the tracking function for widget analytics.
271-271
: LGTM: JSDoc tag updated for widget categorizationThe update from
@bridge @beta @react
to@bridge Widgets
correctly reflects the new widget-based organization.
277-287
: LGTM: Consistent analytics tracking implementationThe 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 compatibilityThe UnsupportedTokenScreen is now receiving
client
andtokenAddress
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 analyticsClean import additions for React Query and analytics tracking with correct type imports.
44-44
: LGTM: Client prop additionThe client prop is properly typed and documented in the interface.
60-74
: LGTM: Conditional analytics trackingThe 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 storiesProper import of createThirdwebClient for storybook stories.
19-19
: LGTM: Test client for storybookCreating a test client with a fixed "test" clientId is appropriate for storybook stories and testing scenarios.
132-132
: LGTM: Consistent client prop across all storiesAll 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 noticeThe 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 integrationThe 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 improvementThe 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
andtokenAddress
props toUnsupportedTokenScreen
, 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 listThe 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.
size-limit report 📦
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
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
*This pull request uses carry forward flags. Click here to find out more.
🚀 New features to boost your workflow:
|
c2a9e42
to
7e11ff2
Compare
9d88523
to
0d21770
Compare
6760994
to
70d7fac
Compare
PR-Codex overview
This PR focuses on deprecating the
PayEmbed
component in favor of theBuyWidget
, along with other related updates and improvements across various components in the codebase.Detailed summary
PayEmbed
component and related documentation.BuyWidget
component with updated functionality.BuyWidget
.Summary by CodeRabbit
New Features
Bug Fixes
Refactor
Documentation
Chores