From 9a6164e2ca06d3be9c53232f1ee3465dd9194574 Mon Sep 17 00:00:00 2001
From: Joaquim Verges <joaquim.verges@gmail.com>
Date: Wed, 25 Jun 2025 12:56:13 +1200
Subject: [PATCH] Handle sponsored gas on TransactionWidget

---
 .changeset/rude-bags-say.md                            |  5 +++++
 .../src/react/core/hooks/useTransactionDetails.ts      | 10 +++++++++-
 .../src/react/web/ui/Bridge/TransactionPayment.tsx     |  3 +++
 .../web/ui/Bridge/payment-details/PaymentOverview.tsx  |  3 +++
 4 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/rude-bags-say.md

diff --git a/.changeset/rude-bags-say.md b/.changeset/rude-bags-say.md
new file mode 100644
index 00000000000..9841317ac6e
--- /dev/null
+++ b/.changeset/rude-bags-say.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Handle sponsored gas on TransactionWidget
diff --git a/packages/thirdweb/src/react/core/hooks/useTransactionDetails.ts b/packages/thirdweb/src/react/core/hooks/useTransactionDetails.ts
index 472a6c853b2..c3039109aec 100644
--- a/packages/thirdweb/src/react/core/hooks/useTransactionDetails.ts
+++ b/packages/thirdweb/src/react/core/hooks/useTransactionDetails.ts
@@ -14,6 +14,8 @@ import type { PreparedTransaction } from "../../../transaction/prepare-transacti
 import { getTransactionGasCost } from "../../../transaction/utils.js";
 import { resolvePromisedValue } from "../../../utils/promise/resolve-promised-value.js";
 import { toTokens } from "../../../utils/units.js";
+import type { Wallet } from "../../../wallets/interfaces/wallet.js";
+import { hasSponsoredTransactionsEnabled } from "../../../wallets/smart/is-smart-wallet.js";
 import {
   formatCurrencyAmount,
   formatTokenAmount,
@@ -40,6 +42,7 @@ interface TransactionDetails {
 interface UseTransactionDetailsOptions {
   transaction: PreparedTransaction;
   client: ThirdwebClient;
+  wallet: Wallet | undefined;
 }
 
 /**
@@ -49,8 +52,10 @@ interface UseTransactionDetailsOptions {
 export function useTransactionDetails({
   transaction,
   client,
+  wallet,
 }: UseTransactionDetailsOptions) {
   const chainMetadata = useChainMetadata(transaction.chain);
+  const hasSponsoredTransactions = hasSponsoredTransactionsEnabled(wallet);
 
   return useQuery({
     enabled: !!transaction.to && !!chainMetadata.data,
@@ -76,7 +81,9 @@ export function useTransactionDetails({
           erc20Value ? erc20Value.tokenAddress : NATIVE_TOKEN_ADDRESS,
           transaction.chain.id,
         ).catch(() => null),
-        getTransactionGasCost(transaction).catch(() => null),
+        hasSponsoredTransactions
+          ? 0n
+          : getTransactionGasCost(transaction).catch(() => null),
       ]);
 
       // Process function info from ABI if available
@@ -172,6 +179,7 @@ export function useTransactionDetails({
       transaction.to,
       transaction.chain.id,
       transaction.erc20Value?.toString(),
+      hasSponsoredTransactions,
     ],
   });
 }
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx b/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx
index 90c2875fedb..6bbb7a93c62 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx
@@ -15,6 +15,7 @@ import {
 import { useChainMetadata } from "../../../core/hooks/others/useChainQuery.js";
 import { useTransactionDetails } from "../../../core/hooks/useTransactionDetails.js";
 import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
+import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
 import { ConnectButton } from "../ConnectWallet/ConnectButton.js";
 import { PoweredByThirdweb } from "../ConnectWallet/PoweredByTW.js";
 import { Container, Line } from "../components/basic.js";
@@ -57,6 +58,7 @@ export function TransactionPayment({
 }: TransactionPaymentProps) {
   const theme = useCustomTheme();
   const activeAccount = useActiveAccount();
+  const wallet = useActiveWallet();
 
   // Get chain metadata for native currency symbol
   const chainMetadata = useChainMetadata(uiOptions.transaction.chain);
@@ -65,6 +67,7 @@ export function TransactionPayment({
   const transactionDataQuery = useTransactionDetails({
     client,
     transaction: uiOptions.transaction,
+    wallet,
   });
 
   const contractName =
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx b/packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx
index f10b444c453..3402b288367 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx
@@ -188,6 +188,7 @@ export function PaymentOverview(props: {
         {props.uiOptions.mode === "transaction" && (
           <TransactionOverViewCompact
             client={props.client}
+            paymentMethod={props.paymentMethod}
             uiOptions={props.uiOptions}
           />
         )}
@@ -198,12 +199,14 @@ export function PaymentOverview(props: {
 
 const TransactionOverViewCompact = (props: {
   uiOptions: Extract<UIOptions, { mode: "transaction" }>;
+  paymentMethod: PaymentMethod;
   client: ThirdwebClient;
 }) => {
   const theme = useCustomTheme();
   const txInfo = useTransactionDetails({
     client: props.client,
     transaction: props.uiOptions.transaction,
+    wallet: props.paymentMethod.payerWallet,
   });
 
   if (!txInfo.data) {