From 29c0b7eebc3b8c1b04d276a6ff7d378ee4c8b047 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Tue, 26 Nov 2024 15:39:54 +0530
Subject: [PATCH] feat(web): close-popup-on-outside-click

---
 web/src/components/ClaimPnkButton.tsx                |  2 +-
 web/src/components/Popup/index.tsx                   | 12 ++++++++----
 .../pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx  |  4 +---
 .../CaseDetails/Evidence/SubmitEvidenceModal.tsx     |  2 +-
 .../CourtDetails/StakePanel/StakeWithdrawButton.tsx  |  2 +-
 5 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/web/src/components/ClaimPnkButton.tsx b/web/src/components/ClaimPnkButton.tsx
index dadb67cb9..e3e5c1bb8 100644
--- a/web/src/components/ClaimPnkButton.tsx
+++ b/web/src/components/ClaimPnkButton.tsx
@@ -51,7 +51,7 @@ const ClaimPnkButton: React.FC = () => {
     const { request } = await simulatePnkFaucet(wagmiConfig, {
       functionName: "request",
     });
-    if (walletClient) {
+    if (walletClient && publicClient) {
       wrapWithToast(async () => await walletClient.writeContract(request), publicClient)
         .finally(() => {
           setIsSending(false);
diff --git a/web/src/components/Popup/index.tsx b/web/src/components/Popup/index.tsx
index cedaf64a1..6ef37e4cd 100644
--- a/web/src/components/Popup/index.tsx
+++ b/web/src/components/Popup/index.tsx
@@ -236,9 +236,14 @@ const Popup: React.FC<PopupProps & IPopup> = ({
       break;
   }
 
+  const closePopup = () => {
+    setIsOpen(false);
+    resetValue();
+  };
+
   return (
-    <Overlay>
-      <Container ref={containerRef}>
+    <Overlay onClick={closePopup}>
+      <Container ref={containerRef} onClick={(e) => e.stopPropagation()}>
         {popupType === PopupType.SWAP_SUCCESS && (
           <SVGContainer>
             <CloseIcon onClick={() => setIsOpen(false)} />
@@ -259,8 +264,7 @@ const Popup: React.FC<PopupProps & IPopup> = ({
             variant="secondary"
             text={popupType === PopupType.DISPUTE_CREATED ? "Check the case" : "Close"}
             onClick={() => {
-              setIsOpen(false);
-              resetValue();
+              closePopup();
               if (popupType === PopupType.DISPUTE_CREATED) {
                 const { disputeId } = props as IDisputeCreated;
                 navigate(`/cases/${disputeId}`);
diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx
index a559aacb1..ed7cb79b8 100644
--- a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx
+++ b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx
@@ -137,9 +137,7 @@ const Fund: React.FC<IFund> = ({ amount, setAmount, setIsOpen }) => {
               if (fundAppeal && fundAppealConfig && publicClient) {
                 setIsSending(true);
                 wrapWithToast(async () => await fundAppeal(fundAppealConfig.request), publicClient)
-                  .then((res) => {
-                    res.status && setIsOpen(true);
-                  })
+                  .then((res) => setIsOpen(res.status))
                   .finally(() => {
                     setIsSending(false);
                   });
diff --git a/web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx b/web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx
index 2bac42e52..1154c1bc7 100644
--- a/web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx
+++ b/web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx
@@ -91,7 +91,7 @@ const SubmitEvidenceModal: React.FC<{
   }, [publicClient, wagmiConfig, walletClient, close, evidenceGroup, file, message, setIsSending, uploadFile]);
 
   return (
-    <StyledModal {...{ isOpen }}>
+    <StyledModal {...{ isOpen }} shouldCloseOnEsc shouldCloseOnOverlayClick onRequestClose={close}>
       <h1>Submit New Evidence</h1>
       <StyledTextArea value={message} onChange={(e) => setMessage(e.target.value)} placeholder="Your Arguments" />
       <StyledFileUploader callback={(file: File) => setFile(file)} />
diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx
index 25393bd77..54bb6140f 100644
--- a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx
+++ b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx
@@ -127,7 +127,7 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
     if (setStakeConfig && publicClient) {
       setIsSending(true);
       wrapWithToast(async () => await setStake(setStakeConfig.request), publicClient)
-        .then((res) => res.status && setIsPopupOpen(true))
+        .then((res) => setIsPopupOpen(res.status))
         .finally(() => {
           setIsSending(false);
         });