diff --git a/.changeset/good-papers-give.md b/.changeset/good-papers-give.md new file mode 100644 index 00000000000..ad65dade96b --- /dev/null +++ b/.changeset/good-papers-give.md @@ -0,0 +1,5 @@ +--- +"thirdweb": patch +--- + +Respect fee payer in token payment selection quotes diff --git a/packages/thirdweb/src/react/core/hooks/useBridgeQuote.ts b/packages/thirdweb/src/react/core/hooks/useBridgeQuote.ts index 5a0a1b8ac9f..7565c720ab2 100644 --- a/packages/thirdweb/src/react/core/hooks/useBridgeQuote.ts +++ b/packages/thirdweb/src/react/core/hooks/useBridgeQuote.ts @@ -12,12 +12,14 @@ interface UseBridgeQuoteParams { destinationAmount: bigint; client: ThirdwebClient; enabled?: boolean; + feePayer?: "sender" | "receiver"; } export function useBridgeQuote({ originToken, destinationToken, destinationAmount, + feePayer, client, enabled = true, }: UseBridgeQuoteParams) { @@ -35,6 +37,7 @@ export function useBridgeQuote({ amount: destinationAmount, chainId: originToken.chainId, client, + feePayer, receiver: destinationToken.address, sender: originToken.address, tokenAddress: originToken.address, @@ -59,6 +62,7 @@ export function useBridgeQuote({ destinationToken.chainId, destinationToken.address, destinationAmount.toString(), + feePayer, ], refetchInterval: 60000, // 30 seconds retry: 3, // 1 minute diff --git a/packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx b/packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx index 35a0c492105..bd8da265144 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx @@ -275,6 +275,11 @@ export function BridgeOrchestrator({ connectOptions={connectOptions} destinationAmount={state.context.destinationAmount} destinationToken={state.context.destinationToken} + feePayer={ + uiOptions.mode === "direct_payment" + ? uiOptions.paymentInfo.feePayer + : undefined + } includeDestinationToken={uiOptions.mode !== "fund_wallet"} onBack={() => { send({ type: "BACK" }); diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx index 0ccafe8b1c6..59c872a4a67 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx @@ -77,6 +77,11 @@ export interface PaymentSelectionProps { * @default ["crypto", "card"] */ paymentMethods?: ("crypto" | "card")[]; + + /** + * Fee payer + */ + feePayer?: "sender" | "receiver"; } type Step = @@ -97,6 +102,7 @@ export function PaymentSelection({ connectLocale, includeDestinationToken, paymentMethods = ["crypto", "card"], + feePayer, }: PaymentSelectionProps) { const connectedWallets = useConnectedWallets(); const activeWallet = useActiveWallet(); @@ -113,6 +119,7 @@ export function PaymentSelection({ toChainId: destinationToken.chainId, toToken: destinationToken.address, }); + return true; }, queryKey: ["payment_selection"], }); @@ -267,6 +274,7 @@ export function PaymentSelection({ destinationToken.decimals, )} destinationToken={destinationToken} + feePayer={feePayer} onBack={handleBackToWalletSelection} onPaymentMethodSelected={handlePaymentMethodSelected} paymentMethods={suitableTokenPaymentMethods} diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx index 547562305dc..4d02c9cc2ae 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx @@ -21,6 +21,7 @@ interface TokenSelectionProps { onBack: () => void; destinationToken: Token; destinationAmount: bigint; + feePayer?: "sender" | "receiver"; } // Individual payment method token row component @@ -30,6 +31,7 @@ interface PaymentMethodTokenRowProps { destinationAmount: bigint; client: ThirdwebClient; onPaymentMethodSelected: (paymentMethod: PaymentMethod) => void; + feePayer?: "sender" | "receiver"; } function PaymentMethodTokenRow({ @@ -38,6 +40,7 @@ function PaymentMethodTokenRow({ destinationAmount, client, onPaymentMethodSelected, + feePayer, }: PaymentMethodTokenRowProps) { const theme = useCustomTheme(); @@ -50,6 +53,7 @@ function PaymentMethodTokenRow({ client, destinationAmount, destinationToken, + feePayer, originToken: paymentMethod.originToken, }); @@ -158,6 +162,7 @@ export function TokenSelection({ onBack, destinationToken, destinationAmount, + feePayer, }: TokenSelectionProps) { const theme = useCustomTheme(); @@ -271,6 +276,7 @@ export function TokenSelection({ client={client} destinationAmount={destinationAmount} destinationToken={destinationToken} + feePayer={feePayer} key={`${method.originToken.address}-${method.originToken.chainId}`} onPaymentMethodSelected={onPaymentMethodSelected} paymentMethod={method}