From 43d5580f930116a811dee8ba36297c6f06e1d8a7 Mon Sep 17 00:00:00 2001
From: Manan Tank <manantankm@gmail.com>
Date: Thu, 30 Jan 2025 01:23:25 +0530
Subject: [PATCH 1/2] [TOOL-3260] SDK: Fix Pay Modal logging react-query error
 when opened

---
 .changeset/gentle-dancers-raise.md                         | 5 +++++
 .../react/web/ui/TransactionButton/TransactionModal.tsx    | 7 ++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/gentle-dancers-raise.md

diff --git a/.changeset/gentle-dancers-raise.md b/.changeset/gentle-dancers-raise.md
new file mode 100644
index 00000000000..66f369deee6
--- /dev/null
+++ b/.changeset/gentle-dancers-raise.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix thirdweb Pay Modal logging react-query error when opened
diff --git a/packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx b/packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx
index f8f952c1eb9..87e69d278b8 100644
--- a/packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx
+++ b/packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx
@@ -37,7 +37,10 @@ export function TransactionModal(props: ModalProps) {
   useQuery({
     queryKey: ["transaction-modal-event"],
     queryFn: () => {
-      if (!account || !wallet) return;
+      // Query data cannot be undefined, return null
+      if (!account || !wallet) {
+        return null;
+      }
       trackPayEvent({
         client: props.client,
         walletAddress: account.address,
@@ -45,6 +48,8 @@ export function TransactionModal(props: ModalProps) {
         dstChainId: props.tx.chain.id,
         event: "open_pay_transaction_modal",
       });
+
+      return null;
     },
     enabled: !!wallet,
   });

From 113e1a961c908705e3729a17661fe1c48e94214b Mon Sep 17 00:00:00 2001
From: Manan Tank <manantankm@gmail.com>
Date: Thu, 30 Jan 2025 02:19:33 +0530
Subject: [PATCH 2/2] address gh comment

---
 .../src/react/web/ui/TransactionButton/TransactionModal.tsx  | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx b/packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx
index 87e69d278b8..523eefc2188 100644
--- a/packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx
+++ b/packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx
@@ -37,9 +37,8 @@ export function TransactionModal(props: ModalProps) {
   useQuery({
     queryKey: ["transaction-modal-event"],
     queryFn: () => {
-      // Query data cannot be undefined, return null
       if (!account || !wallet) {
-        return null;
+        throw new Error(); // never happens, because enabled is false
       }
       trackPayEvent({
         client: props.client,
@@ -51,7 +50,7 @@ export function TransactionModal(props: ModalProps) {
 
       return null;
     },
-    enabled: !!wallet,
+    enabled: !!wallet && !!account,
   });
 
   return (