From e893033b40ff16c473d07f5fd34355ea5e2caec3 Mon Sep 17 00:00:00 2001
From: Manan Tank <manantankm@gmail.com>
Date: Wed, 10 Jan 2024 17:41:00 +0530
Subject: [PATCH] Enforce react-hooks/exhaustive-deps lint rule

---
 .changeset/unlucky-horses-sort.md                 |  6 ++++++
 packages/eslint-config-thirdweb/index.js          |  3 +++
 .../src/payments/components/CheckoutWithCard.tsx  | 15 ++++++++++++++-
 .../src/payments/components/PaperCheckout.tsx     |  2 +-
 .../components/VerifyOwnershipWithPaper.tsx       |  2 +-
 .../src/payments/components/common/Modal.tsx      |  2 +-
 6 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/unlucky-horses-sort.md

diff --git a/.changeset/unlucky-horses-sort.md b/.changeset/unlucky-horses-sort.md
new file mode 100644
index 00000000000..145b2c261b9
--- /dev/null
+++ b/.changeset/unlucky-horses-sort.md
@@ -0,0 +1,6 @@
+---
+"eslint-config-thirdweb": patch
+"@thirdweb-dev/react": patch
+---
+
+Enforce react-hooks/exhaustive-deps lint rule
diff --git a/packages/eslint-config-thirdweb/index.js b/packages/eslint-config-thirdweb/index.js
index 09ad1ef0f70..99e6d227c74 100644
--- a/packages/eslint-config-thirdweb/index.js
+++ b/packages/eslint-config-thirdweb/index.js
@@ -50,5 +50,8 @@ module.exports = {
         ],
       },
     ],
+
+    // react
+    "react-hooks/exhaustive-deps": "error",
   },
 };
diff --git a/packages/react/src/payments/components/CheckoutWithCard.tsx b/packages/react/src/payments/components/CheckoutWithCard.tsx
index 9436a5bcd03..3e96c67e2c7 100644
--- a/packages/react/src/payments/components/CheckoutWithCard.tsx
+++ b/packages/react/src/payments/components/CheckoutWithCard.tsx
@@ -97,7 +97,20 @@ export const CheckoutWithCard = ({
       options,
       configs,
     });
-  }, [CheckoutWithCardIframeContainerRef.current]);
+  }, [
+    appNameToUse,
+    clientId,
+    configs,
+    locale,
+    onBeforeModalOpen,
+    onCardDetailLoad,
+    onError,
+    onPaymentSuccess,
+    onPriceUpdate,
+    onReview,
+    options,
+    sdkClientSecret,
+  ]);
 
   return (
     <>
diff --git a/packages/react/src/payments/components/PaperCheckout.tsx b/packages/react/src/payments/components/PaperCheckout.tsx
index d3d8a47e18d..61aae4eed35 100644
--- a/packages/react/src/payments/components/PaperCheckout.tsx
+++ b/packages/react/src/payments/components/PaperCheckout.tsx
@@ -141,7 +141,7 @@ export const PaperCheckout = <T extends ContractType>({
     return () => {
       window.removeEventListener("message", handleMessage);
     };
-  }, []);
+  }, [onCloseCheckout, onPaymentSuccess, onTransferSuccess]);
 
   // Build iframe URL with query params.
   const checkoutUrl = new URL(`/checkout/${checkoutId}`, PAPER_APP_URL);
diff --git a/packages/react/src/payments/components/VerifyOwnershipWithPaper.tsx b/packages/react/src/payments/components/VerifyOwnershipWithPaper.tsx
index c62aaa5c9d0..49282d7b505 100644
--- a/packages/react/src/payments/components/VerifyOwnershipWithPaper.tsx
+++ b/packages/react/src/payments/components/VerifyOwnershipWithPaper.tsx
@@ -84,7 +84,7 @@ export const VerifyOwnershipWithPaper: React.FC<
     return () => {
       window.removeEventListener("message", handleMessage);
     };
-  }, []);
+  }, [onError, onSuccess, onWindowClose]);
 
   const url = new URL("/sdk/v1/login-with-paper", PAPER_APP_URL);
   url.searchParams.append("chainName", chainNameToUse);
diff --git a/packages/react/src/payments/components/common/Modal.tsx b/packages/react/src/payments/components/common/Modal.tsx
index 2596a0d0ef2..48957758149 100644
--- a/packages/react/src/payments/components/common/Modal.tsx
+++ b/packages/react/src/payments/components/common/Modal.tsx
@@ -36,7 +36,7 @@ export const Modal: React.FC<{
     return () => {
       document.removeEventListener("keydown", keyDownHandler);
     };
-  }, []);
+  }, [escapeToClose, onClose]);
 
   const additionalDialogClasses = isFullScreen ? "" : dialogContainedClasses;
   const dialogPanelBg = isFullScreen ? "transparent" : bgColor;