feat(web): close-popup-on-outside-click

Author: tractorss

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

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

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

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)} />

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