From ae0159e782da3b9975787efb4286b05951c96be3 Mon Sep 17 00:00:00 2001 From: MananTank Date: Thu, 16 Oct 2025 16:47:30 +0000 Subject: [PATCH] [MNY-256] SDK: Update onSuccess prop of BuyWidget, CheckoutWidget, SwapWidget, BridgeWidget components (#8259) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ## 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}` ## 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. --- .changeset/strong-buses-love.md | 14 ++++++++++++++ .../src/@/components/blocks/BuyAndSwapEmbed.tsx | 4 ++-- .../src/app/bridge/bridge-widget-script/page.mdx | 10 ++++++++-- packages/thirdweb/src/exports/react.ts | 5 +++-- .../thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx | 10 ++++++++-- .../src/react/web/ui/Bridge/CheckoutWidget.tsx | 10 ++++++++-- .../web/ui/Bridge/bridge-widget/bridge-widget.tsx | 11 +++++++++-- .../react/web/ui/Bridge/swap-widget/SwapWidget.tsx | 10 ++++++++-- .../src/script-exports/bridge-widget-script.tsx | 11 +++++++++-- 9 files changed, 69 insertions(+), 16 deletions(-) create mode 100644 .changeset/strong-buses-love.md diff --git a/.changeset/strong-buses-love.md b/.changeset/strong-buses-love.md new file mode 100644 index 00000000000..eb9890739dd --- /dev/null +++ b/.changeset/strong-buses-love.md @@ -0,0 +1,14 @@ +--- +"thirdweb": minor +--- + +Update `onSuccess` prop on `BuyWidget`, `CheckoutWidget`, `SwapWidget`, and `BridgeWidget` components to include `statuses` and `quote` objects instead of just `quote`. + +```tsx + { + console.log(data.statuses); + console.log(data.quote); + }} +/> +``` diff --git a/apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx b/apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx index 54327edb2d4..b0b207667de 100644 --- a/apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx +++ b/apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx @@ -147,7 +147,7 @@ export function BuyAndSwapEmbed(props: { }); } }} - onSuccess={(quote) => { + onSuccess={({ quote }) => { reportTokenBuySuccessful({ buyTokenChainId: quote.type === "buy" @@ -208,7 +208,7 @@ export function BuyAndSwapEmbed(props: { pageType: props.pageType, }); }} - onSuccess={(quote) => { + onSuccess={({ quote }) => { reportTokenSwapSuccessful({ buyTokenChainId: quote.intent.destinationChainId, buyTokenAddress: quote.intent.destinationTokenAddress, diff --git a/apps/portal/src/app/bridge/bridge-widget-script/page.mdx b/apps/portal/src/app/bridge/bridge-widget-script/page.mdx index 49dc228815b..d8ab12a9b5d 100644 --- a/apps/portal/src/app/bridge/bridge-widget-script/page.mdx +++ b/apps/portal/src/app/bridge/bridge-widget-script/page.mdx @@ -104,7 +104,10 @@ type Options = { swap?: { className?: string; style?: React.CSSProperties; - onSuccess?: (quote: SwapPreparedQuote) => void; + onSuccess?: (data: { + quote: SwapPreparedQuote; + statuses: CompletedStatusResult[]; + }) => void; onError?: (error: Error, quote: SwapPreparedQuote) => void; onCancel?: (quote: SwapPreparedQuote) => void; onDisconnect?: () => void; @@ -132,7 +135,10 @@ type Options = { error: Error, quote: BuyOrOnrampPrepareResult | undefined, ) => void; - onSuccess?: (quote: BuyOrOnrampPrepareResult) => void; + onSuccess?: (data: { + quote: BuyOrOnrampPrepareResult; + statuses: CompletedStatusResult[]; + }) => void; className?: string; country?: string; presetOptions?: [number, number, number]; diff --git a/packages/thirdweb/src/exports/react.ts b/packages/thirdweb/src/exports/react.ts index db9ba39e31f..7c3a89bd16d 100644 --- a/packages/thirdweb/src/exports/react.ts +++ b/packages/thirdweb/src/exports/react.ts @@ -73,10 +73,12 @@ export type { SendTransactionPayModalConfig, } from "../react/core/hooks/transaction/useSendTransaction.js"; export { useSimulateTransaction } from "../react/core/hooks/transaction/useSimulateTransaction.js"; +export type { BridgePrepareResult } from "../react/core/hooks/useBridgePrepare.js"; export { type UseBridgeRoutesParams, useBridgeRoutes, } from "../react/core/hooks/useBridgeRoutes.js"; +export type { CompletedStatusResult } from "../react/core/hooks/useStepExecutor.js"; export { useActiveAccount } from "../react/core/hooks/wallets/useActiveAccount.js"; // wallet hooks export { useActiveWallet } from "../react/core/hooks/wallets/useActiveWallet.js"; @@ -133,7 +135,7 @@ export { useProfiles } from "../react/web/hooks/wallets/useProfiles.js"; export { useUnlinkProfile } from "../react/web/hooks/wallets/useUnlinkProfile.js"; export { ThirdwebProvider } from "../react/web/providers/thirdweb-provider.js"; export { AutoConnect } from "../react/web/ui/AutoConnect/AutoConnect.js"; - +export type { BuyOrOnrampPrepareResult } from "../react/web/ui/Bridge/BuyWidget.js"; export { BuyWidget, type BuyWidgetProps, @@ -276,7 +278,6 @@ export { SiteEmbed } from "../react/web/ui/SiteEmbed.js"; export { SiteLink } from "../react/web/ui/SiteLink.js"; export { TransactionButton } from "../react/web/ui/TransactionButton/index.js"; export type { LocaleId } from "../react/web/ui/types.js"; - // Utils export { getLastAuthProvider } from "../react/web/utils/storage.js"; export type { diff --git a/packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx index 46a4e3fed63..8f00daae52c 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx @@ -158,7 +158,10 @@ export type BuyWidgetProps = { /** * Callback triggered when the purchase is successful. */ - onSuccess?: (quote: BuyOrOnrampPrepareResult) => void; + onSuccess?: (data: { + quote: BuyOrOnrampPrepareResult; + statuses: CompletedStatusResult[]; + }) => void; /** * Callback triggered when the purchase encounters an error. @@ -616,7 +619,10 @@ function BridgeWidgetContent( screen.preparedQuote.type === "buy" || screen.preparedQuote.type === "onramp" ) { - props.onSuccess?.(screen.preparedQuote); + props.onSuccess?.({ + quote: screen.preparedQuote, + statuses: completedStatuses, + }); } setScreen({ id: "6:success", diff --git a/packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx index de1b62c939d..499a6ff4fe5 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx @@ -170,7 +170,10 @@ export type CheckoutWidgetProps = { /** * Callback triggered when the purchase is successful. */ - onSuccess?: (quote: BridgePrepareResult) => void; + onSuccess?: (data: { + quote: BridgePrepareResult; + statuses: CompletedStatusResult[]; + }) => void; /** * Callback triggered when the purchase encounters an error. @@ -660,7 +663,10 @@ function CheckoutWidgetContent( handleCancel(screen.preparedQuote); }} onComplete={(completedStatuses) => { - props.onSuccess?.(screen.preparedQuote); + props.onSuccess?.({ + quote: screen.preparedQuote, + statuses: completedStatuses, + }); setScreen({ id: "6:success", preparedQuote: screen.preparedQuote, diff --git a/packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx index 27e97f07446..46e745eb090 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx @@ -15,6 +15,7 @@ import { spacing, type Theme, } from "../../../../core/design-system/index.js"; +import type { CompletedStatusResult } from "../../../../core/hooks/useStepExecutor.js"; import { EmbedContainer } from "../../ConnectWallet/Modal/ConnectEmbed.js"; import { Container } from "../../components/basic.js"; import { Button } from "../../components/buttons.js"; @@ -84,7 +85,10 @@ export type BridgeWidgetProps = { /** Optional style overrides applied to the Swap tab content container. */ style?: React.CSSProperties; /** Callback invoked when a swap is successful. */ - onSuccess?: (quote: SwapPreparedQuote) => void; + onSuccess?: (data: { + quote: SwapPreparedQuote; + statuses: CompletedStatusResult[]; + }) => void; /** Callback invoked when an error occurs during swapping. */ onError?: (error: Error, quote: SwapPreparedQuote) => void; /** Callback invoked when the user cancels the swap. */ @@ -174,7 +178,10 @@ export type BridgeWidgetProps = { quote: BuyOrOnrampPrepareResult | undefined, ) => void; /** Callback triggered when the purchase is successful. */ - onSuccess?: (quote: BuyOrOnrampPrepareResult) => void; + onSuccess?: (data: { + quote: BuyOrOnrampPrepareResult; + statuses: CompletedStatusResult[]; + }) => void; /** Optional class name applied to the Buy tab content container. */ className?: string; /** The user's ISO 3166 alpha-2 country code. Used to determine onramp provider support. */ diff --git a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx index 69752d88c2c..1b9f1140d92 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx @@ -145,7 +145,10 @@ export type SwapWidgetProps = { /** * Callback to be called when the swap is successful. */ - onSuccess?: (quote: SwapPreparedQuote) => void; + onSuccess?: (data: { + quote: SwapPreparedQuote; + statuses: CompletedStatusResult[]; + }) => void; /** * Callback to be called when user encounters an error when swapping. */ @@ -465,7 +468,10 @@ function SwapWidgetContent( }} onCancel={() => props.onCancel?.(screen.preparedQuote)} onComplete={(completedStatuses) => { - props.onSuccess?.(screen.preparedQuote); + props.onSuccess?.({ + quote: screen.preparedQuote, + statuses: completedStatuses, + }); setScreen({ ...screen, id: "4:success", diff --git a/packages/thirdweb/src/script-exports/bridge-widget-script.tsx b/packages/thirdweb/src/script-exports/bridge-widget-script.tsx index 2647d82c492..588911c230a 100644 --- a/packages/thirdweb/src/script-exports/bridge-widget-script.tsx +++ b/packages/thirdweb/src/script-exports/bridge-widget-script.tsx @@ -7,6 +7,7 @@ import { type Theme, type ThemeOverrides, } from "../react/core/design-system/index.js"; +import type { CompletedStatusResult } from "../react/core/hooks/useStepExecutor.js"; import type { BuyOrOnrampPrepareResult } from "../react/web/ui/Bridge/BuyWidget.js"; import { BridgeWidget } from "../react/web/ui/Bridge/bridge-widget/bridge-widget.js"; import type { SwapPreparedQuote } from "../react/web/ui/Bridge/swap-widget/types.js"; @@ -23,7 +24,10 @@ export type BridgeWidgetScriptProps = { swap?: { className?: string; style?: React.CSSProperties; - onSuccess?: (quote: SwapPreparedQuote) => void; + onSuccess?: (data: { + quote: SwapPreparedQuote; + statuses: CompletedStatusResult[]; + }) => void; onError?: (error: Error, quote: SwapPreparedQuote) => void; onCancel?: (quote: SwapPreparedQuote) => void; onDisconnect?: () => void; @@ -51,7 +55,10 @@ export type BridgeWidgetScriptProps = { error: Error, quote: BuyOrOnrampPrepareResult | undefined, ) => void; - onSuccess?: (quote: BuyOrOnrampPrepareResult) => void; + onSuccess?: (data: { + quote: BuyOrOnrampPrepareResult; + statuses: CompletedStatusResult[]; + }) => void; className?: string; country?: string; presetOptions?: [number, number, number];