[SDK] Respect fee payer in token payment selection quotes

Author: joaquim-verges

.changeset/good-papers-give.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Respect fee payer in token payment selection quotes

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

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" });

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}

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}