diff --git a/.changeset/angry-dragons-smash.md b/.changeset/angry-dragons-smash.md new file mode 100644 index 00000000000..07e2f32c6e6 --- /dev/null +++ b/.changeset/angry-dragons-smash.md @@ -0,0 +1,5 @@ +--- +"thirdweb": patch +--- + +Respect feePayer property in Payment widgets diff --git a/packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx b/packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx index 038b2907707..c35f0e22340 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx @@ -292,7 +292,6 @@ export function BridgeOrchestrator({ amount={state.context.destinationAmount} client={client} destinationToken={state.context.destinationToken} - mode={uiOptions.mode} onBack={() => { send({ type: "BACK" }); }} @@ -302,6 +301,7 @@ export function BridgeOrchestrator({ paymentMethod={state.context.selectedPaymentMethod} purchaseData={purchaseData} receiver={state.context.receiverAddress} + uiOptions={uiOptions} /> )} diff --git a/packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx b/packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx index dc7a9c0aaa5..8f740fd36f7 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx @@ -17,6 +17,7 @@ import { Container } from "../components/basic.js"; import { Spacer } from "../components/Spacer.js"; import { Spinner } from "../components/Spinner.js"; import { Text } from "../components/text.js"; +import type { UIOptions } from "./BridgeOrchestrator.js"; interface QuoteLoaderProps { /** @@ -78,14 +79,13 @@ interface QuoteLoaderProps { paymentLinkId?: string; /** - * Fee payer for direct transfers (defaults to sender) + * UI options */ - feePayer?: "sender" | "receiver"; - mode: "fund_wallet" | "direct_payment" | "transaction"; + uiOptions: UIOptions; } export function QuoteLoader({ - mode, + uiOptions, destinationToken, paymentMethod, amount, @@ -96,10 +96,14 @@ export function QuoteLoader({ onError, purchaseData, paymentLinkId, - feePayer, }: QuoteLoaderProps) { // For now, we'll use a simple buy operation // This will be expanded to handle different bridge types based on the payment method + const feePayer = + uiOptions.mode === "direct_payment" + ? uiOptions.paymentInfo.feePayer + : undefined; + const mode = uiOptions.mode; const request: BridgePrepareRequest = getBridgeParams({ amount, client, diff --git a/packages/thirdweb/src/react/web/ui/PayEmbed.tsx b/packages/thirdweb/src/react/web/ui/PayEmbed.tsx index 87446b4e5db..434ede8f1e5 100644 --- a/packages/thirdweb/src/react/web/ui/PayEmbed.tsx +++ b/packages/thirdweb/src/react/web/ui/PayEmbed.tsx @@ -380,6 +380,9 @@ export function PayEmbed(props: PayEmbedProps) { chain={props.payOptions.paymentInfo.chain} client={props.client} description={metadata?.description} + feePayer={ + props.payOptions.paymentInfo.feePayer === "sender" ? "user" : "seller" + } image={metadata?.image} name={metadata?.name || "Checkout"} onSuccess={() => props.payOptions?.onPurchaseSuccess?.()}