[MNY-256] SDK: Update onSuccess prop of BuyWidget, CheckoutWidget, SwapWidget, BridgeWidget components #8259
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: ae0159e The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
github-actions
bot
added
Dashboard
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
WalkthroughThe onSuccess callback signature for BuyWidget, CheckoutWidget, SwapWidget, and BridgeWidget changed: handlers now receive an object Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor Dev as App / Developer
participant W as Widget (Buy/Swap/Checkout/Bridge)
participant Exec as Execution Flow
participant CB as onSuccess Callback
Dev->>W: Render widget with onSuccess(handler)
W->>Exec: Execute flow (swap/buy/checkout)
Exec-->>W: Success -> returns quote + completedStatuses
W->>CB: onSuccess({ quote, statuses: completedStatuses })
Note right of CB #cdeccf: Handler receives both quote and statuses
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Pre-merge checks and finishing touches❌ Failed checks (3 warnings)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro Disabled knowledge base sources:
📒 Files selected for processing (9)
🚧 Files skipped from review as they are similar to previous changes (3)
🧰 Additional context used📓 Path-based instructions (5)**/*.{ts,tsx}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (CLAUDE.md)
Files:
packages/thirdweb/**/*.{ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
packages/thirdweb/src/exports/**📄 CodeRabbit inference engine (CLAUDE.md)
Files:
.changeset/*.md📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧠 Learnings (7)📓 Common learnings📚 Learning: 2025-09-24T11:08:43.783ZApplied to files:
📚 Learning: 2025-09-24T11:09:45.142ZApplied to files:
📚 Learning: 2025-06-17T18:30:52.976ZApplied to files:
📚 Learning: 2025-07-18T19:19:55.613ZApplied to files:
📚 Learning: 2025-10-03T23:36:00.631ZApplied to files:
📚 Learning: 2025-08-29T15:37:38.513ZApplied to files:
🧬 Code graph analysis (4)packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (2)
packages/thirdweb/src/script-exports/bridge-widget-script.tsx (3)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx (2)
packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
🔇 Additional comments (11)
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
Comment |
MananTank
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/portal/src/app/bridge/bridge-widget-script/page.mdx (1)
163-328: Fix inconsistent onSuccess typings in docs.Lines 163‑324 still document
onSuccessas receiving only aquote, contradicting the updated API (lines 107‑141) where it now receives{ quote, statuses }. This mismatch will mislead integrators. Please update both theSwapandBuytype snippets here to mirror the new object payload.- onSuccess?: (quote: SwapPreparedQuote) => void; + onSuccess?: (data: { + quote: SwapPreparedQuote; + statuses: CompletedStatusResult[]; + }) => void; @@ - onSuccess?: (quote: BuyOrOnrampPrepareResult) => void; + onSuccess?: (data: { + quote: BuyOrOnrampPrepareResult; + statuses: CompletedStatusResult[]; + }) => void;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (9)
.changeset/strong-buses-love.md(1 hunks)apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx(2 hunks)apps/portal/src/app/bridge/bridge-widget-script/page.mdx(2 hunks)packages/thirdweb/src/exports/react.ts(2 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/bridge-widget/bridge-widget.tsx(3 hunks)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx(2 hunks)packages/thirdweb/src/script-exports/bridge-widget-script.tsx(3 hunks)
🧰 Additional context used
📓 Path-based instructions (8)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsxpackages/thirdweb/src/script-exports/bridge-widget-script.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsxapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxpackages/thirdweb/src/exports/react.tspackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsxpackages/thirdweb/src/script-exports/bridge-widget-script.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsxapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxpackages/thirdweb/src/exports/react.tspackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx
packages/thirdweb/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
packages/thirdweb/**/*.{ts,tsx}: Every public symbol must have comprehensive TSDoc with at least one compiling@exampleand a custom tag (@beta,@internal,@experimental, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
Lazy‑load heavy dependencies inside async paths (e.g.,const { jsPDF } = await import("jspdf"))
Files:
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsxpackages/thirdweb/src/script-exports/bridge-widget-script.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsxpackages/thirdweb/src/exports/react.tspackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx
.changeset/*.md
📄 CodeRabbit inference engine (AGENTS.md)
.changeset/*.md: Each change inpackages/*must include a changeset for the appropriate package
Version bump rules: patch for non‑API changes; minor for new/modified public API
Files:
.changeset/strong-buses-love.md
apps/{dashboard,playground-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/{dashboard,playground-web}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/_(e.g., Button, Input, Tabs, Card)
UseNavLinkfor internal navigation to get active state handling
Use Tailwind CSS for styling; no inline styles
Merge class names withcn()from@/lib/utilsfor conditional classes
Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components must start withimport "server-only"; usenext/headers, server‑only env, heavy data fetching, andredirect()where appropriate
Client Components must start with'use client'; handle interactivity with hooks and browser APIs
Server-side data fetching: callgetAuthToken()from cookies, sendAuthorization: Bearer <token>header, and return typed results (avoidany)
Client-side data fetching: wrap calls in React Query with descriptive, stablequeryKeysand set sensiblestaleTime/cacheTime(≥ 60s default); keep tokens secret via internal routes or server actions
Do not importposthog-jsin server components (client-side only)
Files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
apps/{dashboard,playground}/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Expose a
classNameprop on the root element of every component
Files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
packages/thirdweb/src/exports/**
📄 CodeRabbit inference engine (CLAUDE.md)
packages/thirdweb/src/exports/**: Export everything viaexports/directory, grouped by feature in the SDK public API
Every public symbol must have comprehensive TSDoc with at least one@exampleblock that compiles and custom annotation tags (@beta,@internal,@experimental)
Files:
packages/thirdweb/src/exports/react.ts
🧠 Learnings (5)
📓 Common learnings
Learnt from: MananTank
PR: thirdweb-dev/js#8106
File: packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx:34-41
Timestamp: 2025-09-24T11:08:43.783Z
Learning: In BridgeWidgetProps for packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx, the Swap onError callback signature requires a non-undefined SwapPreparedQuote parameter (unlike Buy's onError which allows undefined quote). This is intentional - SwapWidget's onError is only called when a quote is available.
📚 Learning: 2025-09-24T11:08:43.783Z
Learnt from: MananTank
PR: thirdweb-dev/js#8106
File: packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx:34-41
Timestamp: 2025-09-24T11:08:43.783Z
Learning: In BridgeWidgetProps for packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx, the Swap onError callback signature requires a non-undefined SwapPreparedQuote parameter (unlike Buy's onError which allows undefined quote). This is intentional - SwapWidget's onError is only called when a quote is available.
Applied to files:
apps/portal/src/app/bridge/bridge-widget-script/page.mdxpackages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx.changeset/strong-buses-love.mdpackages/thirdweb/src/script-exports/bridge-widget-script.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsxapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxpackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to src/exports/react.native.ts : React Native specific exports are in `src/exports/react.native.ts`
Applied to files:
packages/thirdweb/src/exports/react.ts
📚 Learning: 2025-06-17T18:30:52.976Z
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.
Applied to files:
packages/thirdweb/src/exports/react.ts
📚 Learning: 2025-10-03T23:36:00.631Z
Learnt from: MananTank
PR: thirdweb-dev/js#8181
File: packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx:27-27
Timestamp: 2025-10-03T23:36:00.631Z
Learning: In packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx, the component intentionally uses a hardcoded English locale (connectLocaleEn) rather than reading from the provider, as BuyWidget is designed to be English-only and does not require internationalization support.
Applied to files:
packages/thirdweb/src/exports/react.ts
🧬 Code graph analysis (4)
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx (3)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/types.ts (1)
SwapPreparedQuote(154-157)packages/thirdweb/src/exports/react.ts (2)
CompletedStatusResult(81-81)BuyOrOnrampPrepareResult(138-138)packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (1)
BuyOrOnrampPrepareResult(40-43)
packages/thirdweb/src/script-exports/bridge-widget-script.tsx (2)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/types.ts (1)
SwapPreparedQuote(154-157)packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (1)
BuyOrOnrampPrepareResult(40-43)
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (1)
packages/thirdweb/src/react/core/hooks/useStepExecutor.ts (1)
CompletedStatusResult(19-26)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx (2)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/types.ts (1)
SwapPreparedQuote(154-157)packages/thirdweb/src/react/core/hooks/useStepExecutor.ts (1)
CompletedStatusResult(19-26)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Size
- GitHub Check: Unit Tests
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (13)
packages/thirdweb/src/exports/react.ts (1)
76-76: LGTM: Type exports correctly added.The new type exports (
BridgePrepareResult,CompletedStatusResult,BuyOrOnrampPrepareResult) properly surface the types needed for the updated onSuccess callback signature. Usingexport typeis appropriate for type-only exports.Also applies to: 81-81, 138-138
packages/thirdweb/src/script-exports/bridge-widget-script.tsx (2)
10-10: LGTM: Import added correctly.The
CompletedStatusResulttype is imported to support the updated onSuccess callback signatures.
27-30: LGTM: Callback signatures updated consistently.Both
swap.onSuccessandbuy.onSuccessnow accept a data object containing bothquoteandstatuses, aligning with the PR objectives and the underlying widget implementations.Also applies to: 58-61
.changeset/strong-buses-love.md (1)
5-14: LGTM: Clear documentation of the API change.The example code clearly demonstrates the new usage pattern for the
onSuccesscallback, showing how to access bothstatusesandquotefrom the data object.apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx (1)
150-150: LGTM: Correctly adapted to new onSuccess signature.The
onSuccesshandlers now destructure{ quote }from the data object parameter, correctly adapting to the updated API. The rest of the logic remains unchanged, accessing quote properties as before.Also applies to: 211-211
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx (2)
148-151: LGTM: Type definition updated correctly.The
onSuccessprop type is updated to accept a data object containing bothquoteandstatuses, aligning with the PR objectives.
471-474: LGTM: Implementation matches type definition.The
onSuccesscallback is invoked with the correct object structure{ quote, statuses }, matching the updated type definition. ThecompletedStatusesfrom theonCompletecallback are properly passed through.packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (2)
161-164: LGTM: Type definition updated correctly.The
onSuccessprop type is updated to accept a data object containing bothquoteandstatuses, consistent with the other widget components.
622-625: LGTM: Implementation correctly guarded and structured.The
onSuccesscallback invocation is properly guarded by a type check ensuring the quote type is "buy" or "onramp" (matchingBuyOrOnrampPrepareResult), and correctly passes the object with{ quote, statuses }.packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (2)
173-176: LGTM: Type definition updated correctly.The
onSuccessprop type is updated to accept a data object containing bothquoteandstatuses, maintaining consistency across all widget components.
666-669: LGTM: Implementation matches type definition.The
onSuccesscallback is invoked with the correct object structure{ quote, statuses }, consistent with the updated type definition and other widget implementations.packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx (2)
16-16: LGTM: Import added correctly.The
CompletedStatusResulttype is imported to support the updated onSuccess callback signatures in the BridgeWidget props.
86-89: LGTM: Callback signatures updated consistently.Both
swap.onSuccessandbuy.onSuccessinBridgeWidgetPropsare updated to accept data objects containingquoteandstatuses, maintaining consistency with the underlyingSwapWidgetandBuyWidgetimplementations.Also applies to: 179-182
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #8259 +/- ##
==========================================
- Coverage 55.01% 55.01% -0.01%
==========================================
Files 919 919
Lines 60588 60591 +3
Branches 4126 4125 -1
==========================================
Hits 33334 33334
- Misses 27150 27153 +3
Partials 104 104
🚀 New features to boost your workflow:
|
size-limit report 📦
|
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/portal/src/app/bridge/bridge-widget-script/page.mdx (1)
163-184: Update the collapsed type definitions to match the new signatures.The type definitions in the collapsed
<Details>sections still show the old callback signatures:
- Line 166:
onSuccess?: (quote: SwapPreparedQuote) => void;- Line 324:
onSuccess?: (quote: BuyOrOnrampPrepareResult) => void;These should be updated to match the new signatures shown in the main
Optionstype definition above.Apply these diffs to fix the inconsistency:
For the Swap type at line 166:
className?: string; style?: React.CSSProperties; - onSuccess?: (quote: SwapPreparedQuote) => void; + onSuccess?: (data: { + quote: SwapPreparedQuote; + statuses: CompletedStatusResult[]; + }) => void; onError?: (error: Error, quote: SwapPreparedQuote) => void;For the Buy type at line 324:
onError?: ( error: Error, quote: BuyOrOnrampPrepareResult | undefined, ) => void; - onSuccess?: (quote: BuyOrOnrampPrepareResult) => void; + onSuccess?: (data: { + quote: BuyOrOnrampPrepareResult; + statuses: CompletedStatusResult[]; + }) => void; className?: string;Also applies to: 314-329
🧹 Nitpick comments (7)
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (1)
161-164: Document the new payload shape and add an example in TSDoc.Please expand the onSuccess prop doc to state it receives
{ quote, statuses }, and include a short example. Consider extracting a shared type alias (e.g.,OnSuccessData<Q> = { quote: Q; statuses: CompletedStatusResult[] }) to reuse across widgets and script props.For the public alias declared earlier in this file, add TSDoc so it meets the package docs requirement:
/** * Result type for Buy or Onramp prepared quotes. * @example * ```ts * function onSuccess(data: { quote: BuyOrOnrampPrepareResult; statuses: CompletedStatusResult[] }) { * console.log(data.quote.type, data.statuses.length); * } * ``` * @beta */ export type BuyOrOnrampPrepareResult = Extract< BridgePrepareResult, { type: "buy" | "onramp" } >;apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx (2)
150-175: Optionally include statuses to enrich analytics.You can destructure
{ quote, statuses }and use statuses-derived tx details (hashes, chains) in reports.
211-219: Same here: consider using statuses as well.Statuses can improve success reporting (e.g., tx hash, final chain).
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx (1)
148-151: Clarify onSuccess payload in docs and add example.Document
{ quote, statuses }and include a minimal code example for consumers. Also, fix the nearby onCancel comment that says “purchase” (it should say “swap”).Example TSDoc snippet for onSuccess:
/** * Callback when the swap completes. * @example * ```tsx * <SwapWidget onSuccess={({ quote, statuses }) => { * console.log(quote.type, statuses.map(s => s.status)); * }} /> * ``` */Doc wording fix (near Lines 157-159):
- /** - * Callback to be called when the user cancels the purchase. - */ + /** + * Callback to be called when the user cancels the swap. + */packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (1)
173-176: Enhance TSDoc to describe{ quote, statuses }and add an example.Update the onSuccess prop comment to explicitly state the payload shape and include a concise example.
Optional: Update the earlier example to show destructuring:
- * onSuccess={() => { - * alert("Purchase successful!"); - * }} + * onSuccess={({ quote, statuses }) => { + * console.log(quote.type, statuses.length); + * alert("Purchase successful!"); + * }}packages/thirdweb/src/script-exports/bridge-widget-script.tsx (2)
27-31: Consistent payload for script onSuccess.Looks good. To avoid repeating the object shape, consider a local generic alias and reuse it in both
swapandbuy.@@ -import type { CompletedStatusResult } from "../react/core/hooks/useStepExecutor.js"; +import type { CompletedStatusResult } from "../react/core/hooks/useStepExecutor.js"; @@ -export type BridgeWidgetScriptProps = { +type OnSuccessData<Q> = { quote: Q; statuses: CompletedStatusResult[] }; + +export type BridgeWidgetScriptProps = { @@ - onSuccess?: (data: { - quote: SwapPreparedQuote; - statuses: CompletedStatusResult[]; - }) => void; + onSuccess?: (data: OnSuccessData<SwapPreparedQuote>) => void; @@ - onSuccess?: (data: { - quote: BuyOrOnrampPrepareResult; - statuses: CompletedStatusResult[]; - }) => void; + onSuccess?: (data: OnSuccessData<BuyOrOnrampPrepareResult>) => void;
58-61: Same suggestion applies here (reuse alias).
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (9)
.changeset/strong-buses-love.md(1 hunks)apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx(2 hunks)apps/portal/src/app/bridge/bridge-widget-script/page.mdx(2 hunks)packages/thirdweb/src/exports/react.ts(2 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/bridge-widget/bridge-widget.tsx(3 hunks)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx(2 hunks)packages/thirdweb/src/script-exports/bridge-widget-script.tsx(3 hunks)
🧰 Additional context used
📓 Path-based instructions (8)
.changeset/*.md
📄 CodeRabbit inference engine (AGENTS.md)
.changeset/*.md: Each change inpackages/*must include a changeset for the appropriate package
Version bump rules: patch for non‑API changes; minor for new/modified public API
Files:
.changeset/strong-buses-love.md
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
packages/thirdweb/src/script-exports/bridge-widget-script.tsxpackages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsxpackages/thirdweb/src/exports/react.tspackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsxapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
packages/thirdweb/src/script-exports/bridge-widget-script.tsxpackages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsxpackages/thirdweb/src/exports/react.tspackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsxapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
packages/thirdweb/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
packages/thirdweb/**/*.{ts,tsx}: Every public symbol must have comprehensive TSDoc with at least one compiling@exampleand a custom tag (@beta,@internal,@experimental, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
Lazy‑load heavy dependencies inside async paths (e.g.,const { jsPDF } = await import("jspdf"))
Files:
packages/thirdweb/src/script-exports/bridge-widget-script.tsxpackages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsxpackages/thirdweb/src/exports/react.tspackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx
packages/thirdweb/src/exports/**
📄 CodeRabbit inference engine (CLAUDE.md)
packages/thirdweb/src/exports/**: Export everything viaexports/directory, grouped by feature in the SDK public API
Every public symbol must have comprehensive TSDoc with at least one@exampleblock that compiles and custom annotation tags (@beta,@internal,@experimental)
Files:
packages/thirdweb/src/exports/react.ts
apps/{dashboard,playground-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/{dashboard,playground-web}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/_(e.g., Button, Input, Tabs, Card)
UseNavLinkfor internal navigation to get active state handling
Use Tailwind CSS for styling; no inline styles
Merge class names withcn()from@/lib/utilsfor conditional classes
Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components must start withimport "server-only"; usenext/headers, server‑only env, heavy data fetching, andredirect()where appropriate
Client Components must start with'use client'; handle interactivity with hooks and browser APIs
Server-side data fetching: callgetAuthToken()from cookies, sendAuthorization: Bearer <token>header, and return typed results (avoidany)
Client-side data fetching: wrap calls in React Query with descriptive, stablequeryKeysand set sensiblestaleTime/cacheTime(≥ 60s default); keep tokens secret via internal routes or server actions
Do not importposthog-jsin server components (client-side only)
Files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
apps/{dashboard,playground}/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Expose a
classNameprop on the root element of every component
Files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
🧠 Learnings (6)
📓 Common learnings
Learnt from: MananTank
PR: thirdweb-dev/js#8106
File: packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx:34-41
Timestamp: 2025-09-24T11:08:43.783Z
Learning: In BridgeWidgetProps for packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx, the Swap onError callback signature requires a non-undefined SwapPreparedQuote parameter (unlike Buy's onError which allows undefined quote). This is intentional - SwapWidget's onError is only called when a quote is available.
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to .changeset/*.md : Version bump rules: patch for non‑API changes; minor for new/modified public API
Applied to files:
.changeset/strong-buses-love.md
📚 Learning: 2025-09-24T11:08:43.783Z
Learnt from: MananTank
PR: thirdweb-dev/js#8106
File: packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx:34-41
Timestamp: 2025-09-24T11:08:43.783Z
Learning: In BridgeWidgetProps for packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx, the Swap onError callback signature requires a non-undefined SwapPreparedQuote parameter (unlike Buy's onError which allows undefined quote). This is intentional - SwapWidget's onError is only called when a quote is available.
Applied to files:
.changeset/strong-buses-love.mdapps/portal/src/app/bridge/bridge-widget-script/page.mdxpackages/thirdweb/src/script-exports/bridge-widget-script.tsxpackages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsxpackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsxapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
📚 Learning: 2025-06-17T18:30:52.976Z
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.
Applied to files:
packages/thirdweb/src/exports/react.ts
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to src/exports/react.native.ts : React Native specific exports are in `src/exports/react.native.ts`
Applied to files:
packages/thirdweb/src/exports/react.ts
📚 Learning: 2025-10-03T23:36:00.631Z
Learnt from: MananTank
PR: thirdweb-dev/js#8181
File: packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx:27-27
Timestamp: 2025-10-03T23:36:00.631Z
Learning: In packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx, the component intentionally uses a hardcoded English locale (connectLocaleEn) rather than reading from the provider, as BuyWidget is designed to be English-only and does not require internationalization support.
Applied to files:
packages/thirdweb/src/exports/react.ts
🧬 Code graph analysis (5)
packages/thirdweb/src/script-exports/bridge-widget-script.tsx (3)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/types.ts (1)
SwapPreparedQuote(154-157)packages/thirdweb/src/exports/react.ts (2)
CompletedStatusResult(81-81)BuyOrOnrampPrepareResult(138-138)packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (1)
BuyOrOnrampPrepareResult(40-43)
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx (3)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/types.ts (1)
SwapPreparedQuote(154-157)packages/thirdweb/src/exports/react.ts (2)
CompletedStatusResult(81-81)BuyOrOnrampPrepareResult(138-138)packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (1)
BuyOrOnrampPrepareResult(40-43)
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (2)
packages/thirdweb/src/exports/react.ts (2)
BuyOrOnrampPrepareResult(138-138)CompletedStatusResult(81-81)packages/thirdweb/src/react/core/hooks/useStepExecutor.ts (1)
CompletedStatusResult(19-26)
packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (1)
packages/thirdweb/src/exports/react.ts (2)
BridgePrepareResult(76-76)CompletedStatusResult(81-81)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx (2)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/types.ts (1)
SwapPreparedQuote(154-157)packages/thirdweb/src/react/core/hooks/useStepExecutor.ts (1)
CompletedStatusResult(19-26)
🪛 GitHub Check: codecov/patch
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx
[warning] 622-625: packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx#L622-L625
Added lines #L622 - L625 were not covered by tests
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Size
- GitHub Check: Analyze (javascript)
🔇 Additional comments (12)
.changeset/strong-buses-love.md (2)
1-3: Correct bump level for public API change.Minor bump aligns with modified callback signature. Looks good.
5-14: Clear changeset example.Example correctly demonstrates new
{ statuses, quote }payload.packages/thirdweb/src/exports/react.ts (3)
76-76: Type export looks correct.
81-81: Type export looks correct.
138-139: Public alias export added properly.Ensure the alias’ defining site includes TSDoc (see note in BuyWidget comment).
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx (1)
471-474: LGTM: passes{ quote, statuses }to onSuccess.packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (1)
666-669: LGTM: calls onSuccess with{ quote, statuses }.packages/thirdweb/src/script-exports/bridge-widget-script.tsx (1)
10-10: Type-only import is correct.packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx (3)
16-16: LGTM!The import of
CompletedStatusResultis correctly added to support the updatedonSuccesscallback signatures.
179-182: Verify all external invocations of BridgeWidget’s buy.onSuccess
No occurrences found via automated search; manually confirm that any consumers handle the new{ quote, statuses }signature.
86-89: Ensure all BridgeWidget swap.onSuccess consumers are updated
TheonSuccesscallback now receives{ quote, statuses }instead of justquote. This is a breaking change—verify every usage handles the new object signature.apps/portal/src/app/bridge/bridge-widget-script/page.mdx (1)
107-110: LGTM!The main
Optionstype definition correctly documents the updatedonSuccesscallback signatures for bothswapandbuy, accurately reflecting the breaking API changes.Also applies to: 138-141
Merge activity
|
…apWidget, BridgeWidget components (#8259) <!-- ## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes" If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000): ## Notes for the reviewer Anything important to call out? Be sure to also clarify these in your comments. ## How to test Unit tests, playground, etc. --> <!-- start pr-codex --> --- ## PR-Codex overview This PR updates the `onSuccess` prop across multiple components to include both `statuses` and `quote` objects, enhancing the data returned upon successful transactions. ### Detailed summary - Updated `onSuccess` prop in `BuyWidget`, `CheckoutWidget`, `SwapWidget`, and `BridgeWidget` to accept an object with `quote` and `statuses`. - Adjusted the implementation in `BuyAndSwapEmbed`, `BridgeWidgetContent`, `CheckoutWidgetContent`, and `SwapWidgetContent` to utilize the new structure. - Modified type definitions to reflect the changes in the `onSuccess` prop across various components. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * onSuccess callbacks for Buy, Checkout, Swap, and Bridge widgets now return an object containing the quote and an array of completion statuses. * Added public type exports for richer typing: BridgePrepareResult, CompletedStatusResult, and BuyOrOnrampPrepareResult. * **Documentation** * Updated guides and examples to show the new onSuccess payload shape and recommended destructuring usage in callbacks. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
mny-256
branch
from
c227e12 to
58c5ac8
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (1)
622-625: Verify test coverage for the updated onSuccess invocation.The implementation correctly passes
{ quote, statuses }toonSuccess. However, as noted in a previous review, these lines lack test coverage. Consider adding a test that verifiesonSuccessis called with the correct payload structure upon completion.#!/bin/bash # Search for existing tests covering BuyWidget onSuccess callback rg -n "BuyWidget" --type ts --type tsx -g "*.{test,spec}.{ts,tsx}" -A 10 -B 2 | head -100
🧹 Nitpick comments (1)
apps/portal/src/app/bridge/bridge-widget-script/page.mdx (1)
107-110: Documentation correctly reflects the API change.The type definitions for
swap.onSuccessandbuy.onSuccesshave been updated to show they now receive an object containing bothquoteandstatuses. This correctly documents the breaking change.Consider adding a usage example showing how to access both fields:
#### Example: Accessing quote and statuses in onSuccess ```js BridgeWidget.render(container, { clientId: "your-thirdweb-client-id", swap: { onSuccess: (data) => { console.log("Quote:", data.quote); console.log("Statuses:", data.statuses); // Process completion statuses for additional logic }, }, });Also applies to: 138-141 </blockquote></details> </blockquote></details> <details> <summary>📜 Review details</summary> **Configuration used**: CodeRabbit UI **Review profile**: CHILL **Plan**: Pro **Disabled knowledge base sources:** - Linear integration is disabled by default for public repositories > You can enable these sources in your CodeRabbit configuration. <details> <summary>📥 Commits</summary> Reviewing files that changed from the base of the PR and between c227e12023f59b7b4803f592ada95ff756699124 and 58c5ac874de91d560971adb235b5a2d6d47b479d. </details> <details> <summary>📒 Files selected for processing (9)</summary> * `.changeset/strong-buses-love.md` (1 hunks) * `apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx` (2 hunks) * `apps/portal/src/app/bridge/bridge-widget-script/page.mdx` (2 hunks) * `packages/thirdweb/src/exports/react.ts` (2 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/bridge-widget/bridge-widget.tsx` (3 hunks) * `packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx` (2 hunks) * `packages/thirdweb/src/script-exports/bridge-widget-script.tsx` (3 hunks) </details> <details> <summary>🚧 Files skipped from review as they are similar to previous changes (3)</summary> * .changeset/strong-buses-love.md * packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx * packages/thirdweb/src/script-exports/bridge-widget-script.tsx </details> <details> <summary>🧰 Additional context used</summary> <details> <summary>📓 Path-based instructions (7)</summary> <details> <summary>**/*.{ts,tsx}</summary> **📄 CodeRabbit inference engine (CLAUDE.md)** > `**/*.{ts,tsx}`: Write idiomatic TypeScript with explicit function declarations and return types > Limit each file to one stateless, single-responsibility function for clarity > Re-use shared types from `@/types` or local `types.ts` barrels > Prefer type aliases over interface except for nominal shapes > Avoid `any` and `unknown` unless unavoidable; narrow generics when possible > Choose composition over inheritance; leverage utility types (`Partial`, `Pick`, etc.) > Comment only ambiguous logic; avoid restating TypeScript in prose > > `**/*.{ts,tsx}`: Use explicit function declarations and explicit return types in TypeScript > Limit each file to one stateless, single‑responsibility function > Re‑use shared types from `@/types` where applicable > Prefer `type` aliases over `interface` except for nominal shapes > Avoid `any` and `unknown` unless unavoidable; narrow generics when possible > Prefer composition over inheritance; use utility types (Partial, Pick, etc.) > Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size Files: - `packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx` - `apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx` - `packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx` - `packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx` - `packages/thirdweb/src/exports/react.ts` </details> <details> <summary>**/*.{ts,tsx,js,jsx}</summary> **📄 CodeRabbit inference engine (CLAUDE.md)** > Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading) Files: - `packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx` - `apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx` - `packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx` - `packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx` - `packages/thirdweb/src/exports/react.ts` </details> <details> <summary>packages/thirdweb/**/*.{ts,tsx}</summary> **📄 CodeRabbit inference engine (AGENTS.md)** > `packages/thirdweb/**/*.{ts,tsx}`: Every public symbol must have comprehensive TSDoc with at least one compiling `@example` and a custom tag (`@beta`, `@internal`, `@experimental`, etc.) > Comment only ambiguous logic; avoid restating TypeScript in prose > Lazy‑load heavy dependencies inside async paths (e.g., `const { jsPDF } = await import("jspdf")`) Files: - `packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx` - `packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx` - `packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx` - `packages/thirdweb/src/exports/react.ts` </details> <details> <summary>apps/{dashboard,playground-web}/**/*.{ts,tsx}</summary> **📄 CodeRabbit inference engine (CLAUDE.md)** > `apps/{dashboard,playground-web}/**/*.{ts,tsx}`: Import UI primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps > Use `NavLink` for internal navigation with automatic active states in dashboard and playground apps > Use Tailwind CSS only – no inline styles or CSS modules > Use `cn()` from `@/lib/utils` for conditional class logic > Use design system tokens (e.g., `bg-card`, `border-border`, `text-muted-foreground`) > Server Components (Node edge): Start files with `import "server-only";` > Client Components (browser): Begin files with `'use client';` > Always call `getAuthToken()` to retrieve JWT from cookies on server side > Use `Authorization: Bearer` header – never embed tokens in URLs > Return typed results (e.g., `Project[]`, `User[]`) – avoid `any` > Wrap client-side data fetching calls in React Query (`@tanstack/react-query`) > Use descriptive, stable `queryKeys` for React Query cache hits > Configure `staleTime`/`cacheTime` in React Query based on freshness (default ≥ 60s) > Keep tokens secret via internal API routes or server actions > Never import `posthog-js` in server components Files: - `apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx` </details> <details> <summary>apps/{dashboard,playground}/**/*.{ts,tsx}</summary> **📄 CodeRabbit inference engine (AGENTS.md)** > `apps/{dashboard,playground}/**/*.{ts,tsx}`: Import UI primitives from `@/components/ui/_` (e.g., Button, Input, Tabs, Card) > Use `NavLink` for internal navigation to get active state handling > Use Tailwind CSS for styling; no inline styles > Merge class names with `cn()` from `@/lib/utils` for conditional classes > Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground) > Server Components must start with `import "server-only"`; use `next/headers`, server‑only env, heavy data fetching, and `redirect()` where appropriate > Client Components must start with `'use client'`; handle interactivity with hooks and browser APIs > Server-side data fetching: call `getAuthToken()` from cookies, send `Authorization: Bearer <token>` header, and return typed results (avoid `any`) > Client-side data fetching: wrap calls in React Query with descriptive, stable `queryKeys` and set sensible `staleTime/cacheTime` (≥ 60s default); keep tokens secret via internal routes or server actions > Do not import `posthog-js` in server components (client-side only) Files: - `apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx` </details> <details> <summary>apps/{dashboard,playground}/**/*.tsx</summary> **📄 CodeRabbit inference engine (AGENTS.md)** > Expose a `className` prop on the root element of every component Files: - `apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx` </details> <details> <summary>packages/thirdweb/src/exports/**</summary> **📄 CodeRabbit inference engine (CLAUDE.md)** > `packages/thirdweb/src/exports/**`: Export everything via `exports/` directory, grouped by feature in the SDK public API > Every public symbol must have comprehensive TSDoc with at least one `@example` block that compiles and custom annotation tags (`@beta`, `@internal`, `@experimental`) Files: - `packages/thirdweb/src/exports/react.ts` </details> </details><details> <summary>🧠 Learnings (5)</summary> <details> <summary>📓 Common learnings</summary>Learnt from: MananTank
PR: #8106
File: packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx:34-41
Timestamp: 2025-09-24T11:08:43.783Z
Learning: In BridgeWidgetProps for packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx, the Swap onError callback signature requires a non-undefined SwapPreparedQuote parameter (unlike Buy's onError which allows undefined quote). This is intentional - SwapWidget's onError is only called when a quote is available.</details> <details> <summary>📚 Learning: 2025-09-24T11:08:43.783Z</summary>Learnt from: MananTank
PR: #8106
File: packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx:34-41
Timestamp: 2025-09-24T11:08:43.783Z
Learning: In BridgeWidgetProps for packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx, the Swap onError callback signature requires a non-undefined SwapPreparedQuote parameter (unlike Buy's onError which allows undefined quote). This is intentional - SwapWidget's onError is only called when a quote is available.**Applied to files:** - `apps/portal/src/app/bridge/bridge-widget-script/page.mdx` - `packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx` - `apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx` - `packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx` - `packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx` </details> <details> <summary>📚 Learning: 2025-06-17T18:30:52.976Z</summary>Learnt from: MananTank
PR: #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.**Applied to files:** - `packages/thirdweb/src/exports/react.ts` </details> <details> <summary>📚 Learning: 2025-07-18T19:19:55.613Z</summary>Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to src/exports/react.native.ts : React Native specific exports are insrc/exports/react.native.ts**Applied to files:** - `packages/thirdweb/src/exports/react.ts` </details> <details> <summary>📚 Learning: 2025-10-03T23:36:00.631Z</summary>Learnt from: MananTank
PR: #8181
File: packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx:27-27
Timestamp: 2025-10-03T23:36:00.631Z
Learning: In packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx, the component intentionally uses a hardcoded English locale (connectLocaleEn) rather than reading from the provider, as BuyWidget is designed to be English-only and does not require internationalization support.**Applied to files:** - `packages/thirdweb/src/exports/react.ts` </details> </details><details> <summary>🧬 Code graph analysis (3)</summary> <details> <summary>packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx (2)</summary><blockquote> <details> <summary>packages/thirdweb/src/react/web/ui/Bridge/swap-widget/types.ts (1)</summary> * `SwapPreparedQuote` (154-157) </details> <details> <summary>packages/thirdweb/src/react/core/hooks/useStepExecutor.ts (1)</summary> * `CompletedStatusResult` (19-26) </details> </blockquote></details> <details> <summary>packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (1)</summary><blockquote> <details> <summary>packages/thirdweb/src/exports/react.ts (2)</summary> * `BridgePrepareResult` (76-76) * `CompletedStatusResult` (81-81) </details> </blockquote></details> <details> <summary>packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (2)</summary><blockquote> <details> <summary>packages/thirdweb/src/exports/react.ts (2)</summary> * `BuyOrOnrampPrepareResult` (138-138) * `CompletedStatusResult` (81-81) </details> <details> <summary>packages/thirdweb/src/react/core/hooks/useStepExecutor.ts (1)</summary> * `CompletedStatusResult` (19-26) </details> </blockquote></details> </details> </details> <details> <summary>⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)</summary> * GitHub Check: E2E Tests (pnpm, webpack) * GitHub Check: Size * GitHub Check: Lint Packages * GitHub Check: Analyze (javascript) </details> <details> <summary>🔇 Additional comments (7)</summary><blockquote> <details> <summary>apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx (1)</summary><blockquote> `150-150`: **LGTM!** The `onSuccess` handlers have been correctly updated to destructure `quote` from the new object parameter shape `{ quote, statuses }`. The implementation is consistent across both `BuyWidget` and `SwapWidget`. Also applies to: 211-211 </blockquote></details> <details> <summary>packages/thirdweb/src/exports/react.ts (1)</summary><blockquote> `76-76`: **LGTM!** The type exports correctly expose `BridgePrepareResult`, `CompletedStatusResult`, and `BuyOrOnrampPrepareResult` to the public API surface, enabling consumers to properly type their `onSuccess` handlers with the new payload structure. Also applies to: 81-81, 138-138 </blockquote></details> <details> <summary>packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (1)</summary><blockquote> `161-164`: **LGTM!** The `onSuccess` prop signature has been correctly updated to accept an object containing both `quote` and `statuses`, aligning with the PR objective to include transaction info in the callback. </blockquote></details> <details> <summary>packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (2)</summary><blockquote> `173-176`: **LGTM!** The `onSuccess` prop signature has been correctly updated to accept an object containing both `quote` and `statuses`, consistent with the changes across all widget components. --- `666-669`: **LGTM!** The `onSuccess` callback is correctly invoked with the composite payload `{ quote, statuses }`, providing consumers with both the quote and completion statuses. </blockquote></details> <details> <summary>packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx (2)</summary><blockquote> `148-151`: **LGTM!** The `onSuccess` prop signature has been correctly updated to accept an object containing both `quote` and `statuses`, maintaining consistency with the other widget components. --- `471-474`: **LGTM!** The `onSuccess` callback is correctly invoked with the composite payload `{ quote, statuses }`, consistent with the implementation across all widget components. </blockquote></details> </blockquote></details> </details> <!-- This is an auto-generated comment by CodeRabbit for review status -->
…apWidget, BridgeWidget components (#8259) <!-- ## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes" If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000): ## Notes for the reviewer Anything important to call out? Be sure to also clarify these in your comments. ## How to test Unit tests, playground, etc. --> <!-- start pr-codex --> --- ## PR-Codex overview This PR updates the `onSuccess` prop across several components to include both `statuses` and `quote` objects, enhancing the data provided upon successful transactions. ### Detailed summary - Updated `onSuccess` prop in `BuyWidget`, `CheckoutWidget`, `SwapWidget`, and `BridgeWidget` to accept an object containing `quote` and `statuses`. - Modified the implementation in `BuyAndSwapEmbed` to destructure the `quote`. - Adjusted type definitions for `onSuccess` in various components to reflect the new structure. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * onSuccess callbacks for Buy, Checkout, Swap and Bridge widgets now return an object containing the quote plus an array of completion statuses. * Added public type exports to improve typing: BridgePrepareResult, CompletedStatusResult, and BuyOrOnrampPrepareResult. * **Documentation** * Updated guides and examples to demonstrate the new onSuccess payload shape and recommended destructuring usage in callbacks. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
mny-256
branch
from
58c5ac8 to
ae0159e
Compare
PR-Codex overview
This PR updates the
onSuccessprop for several components to include bothstatusesandquoteobjects, enhancing the data returned upon successful transactions.Detailed summary
onSuccessprop inBuyWidget,CheckoutWidget,SwapWidget, andBridgeWidgetto accept an object containingquoteandstatuses.Summary by CodeRabbit
New Features
Documentation