fix(web): ensure-chain-and-close-on-icon-click

Author: Harman-singh-waraich

web/src/pages/Cases/CaseDetails/MaintenanceButtons/DistributeRewads.tsx web/src/pages/Cases/CaseDetails/MaintenanceButtons/DistributeRewards.tsx

@@ -68,15 +68,15 @@ const StyledDottedMenu = styled(DottedMenu)`
 `;
 
 interface IMenuButton {
-  setIsOpen: (open: boolean) => void;
+  toggle: () => void;
   displayRipple: boolean;
 }
 
-const MenuButton: React.FC<IMenuButton> = ({ setIsOpen, displayRipple }) => {
+const MenuButton: React.FC<IMenuButton> = ({ toggle, displayRipple }) => {
   return (
     <Container {...{ displayRipple }}>
       <ButtonContainer>
-        <StyledDottedMenu onClick={() => setIsOpen(true)} />
+        <StyledDottedMenu onClick={toggle} />
       </ButtonContainer>
     </Container>
   );

web/src/pages/Cases/CaseDetails/MaintenanceButtons/MenuButton.tsx

@@ -8,9 +8,10 @@ import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 import { Periods } from "src/consts/periods";
 import { Period } from "src/graphql/graphql";
 
+import { EnsureChain } from "components/EnsureChain";
 import { Overlay } from "components/Overlay";
 
-import DistributeRewards from "./DistributeRewads";
+import DistributeRewards from "./DistributeRewards";
 import DrawButton from "./DrawButton";
 import ExecuteRulingButton from "./ExecuteRuling";
 import MenuButton from "./MenuButton";
@@ -86,24 +87,29 @@ const MaintenanceButtons: React.FC = () => {
     return () => clearInterval(intervalId);
   }, [dispute]);
 
+  const toggle = () => setIsOpen((prevValue) => !prevValue);
   return (
     <Container>
       {isOpen ? (
         <>
           <Overlay onClick={() => setIsOpen(false)} />
           <PopupContainer>
-            <DrawButton {...{ id, setIsOpen }} numberOfVotes={dispute?.currentRound.nbVotes} />
-            <PassPeriodButton {...{ id, setIsOpen }} />
-            <DistributeRewards
-              {...{ id, setIsOpen }}
-              roundIndex={dispute?.currentRoundIndex}
-              numberOfVotes={dispute?.currentRound.nbVotes}
-            />
-            <ExecuteRulingButton {...{ id, setIsOpen }} />
+            <EnsureChain>
+              <>
+                <DrawButton {...{ id, setIsOpen }} numberOfVotes={dispute?.currentRound.nbVotes} />
+                <PassPeriodButton {...{ id, setIsOpen }} />
+                <DistributeRewards
+                  {...{ id, setIsOpen }}
+                  roundIndex={dispute?.currentRoundIndex}
+                  numberOfVotes={dispute?.currentRound.nbVotes}
+                />
+                <ExecuteRulingButton {...{ id, setIsOpen }} />
+              </>
+            </EnsureChain>
           </PopupContainer>
         </>
       ) : null}
-      <MenuButton {...{ setIsOpen, displayRipple }} />
+      <MenuButton {...{ toggle, displayRipple }} />
     </Container>
   );
 };