fix: interaction-popups

web/src/components/Popup/Description/VoteWithCommit.tsx

@@ -1,39 +1,18 @@
 import React from "react";
-import styled from "styled-components";
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
-const StyledDescription = styled.div`
-  margin-bottom: calc(16px + (32 - 16) * ((100vw - 300px) / (1250 - 300)));
-  margin-left: calc(8px + (32 - 8) * ((100vw - 300px) / (1250 - 300)));
-  margin-right: calc(8px + (32 - 8) * ((100vw - 300px) / (1250 - 300)));
-  color: ${({ theme }) => theme.secondaryText};
-  text-align: center;
-  line-height: 21.8px;
-`;
-
-const EmphasizedDate = styled.span`
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 21.8px;
-  color: ${({ theme }) => theme.primaryText};
-`;
+import VoteDescriptionEmphasizedDate from "components/Popup";
 
 interface IVoteWithCommit {
   date: string;
 }
 
 const VoteWithCommit: React.FC<IVoteWithCommit> = ({ date }) => {
   return (
-    <Container>
-      <StyledDescription>
-        Your vote is confirmed. It's kept secret until all jurors have cast their votes.
-        <EmphasizedDate> You'll need to justify and reveal your vote on {date}</EmphasizedDate>
-      </StyledDescription>
-    </Container>
+    <>
+      Your vote is confirmed. It's kept secret until all jurors have cast their votes.
+      <VoteDescriptionEmphasizedDate>
+        You'll need to justify and reveal your vote on {date}
+      </VoteDescriptionEmphasizedDate>
+    </>
   );
 };
 export default VoteWithCommit;

web/src/components/Popup/Description/VoteWithoutCommit.tsx

@@ -1,39 +1,16 @@
 import React from "react";
-import styled from "styled-components";
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
-const StyledDescription = styled.div`
-  margin-bottom: calc(16px + (32 - 16) * ((100vw - 300px) / (1250 - 300)));
-  margin-left: calc(8px + (32 - 8) * ((100vw - 300px) / (1250 - 300)));
-  margin-right: calc(8px + (32 - 8) * ((100vw - 300px) / (1250 - 300)));
-  color: ${({ theme }) => theme.secondaryText};
-  text-align: center;
-  line-height: 21.8px;
-`;
-
-const EmphasizedDate = styled.span`
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 21.8px;
-  color: ${({ theme }) => theme.primaryText};
-`;
+import VoteDescriptionEmphasizedDate from "components/Popup";
 
 interface IVoteWithoutCommit {
   date: string;
 }
 
 const VoteWithoutCommit: React.FC<IVoteWithoutCommit> = ({ date }) => {
   return (
-    <Container>
-      <StyledDescription>
-        The decision date is <EmphasizedDate>{date}</EmphasizedDate> with the possibility for appeals. After that time
-        you will be informed about the jury decision.
-      </StyledDescription>
-    </Container>
+    <>
+      The decision date is <VoteDescriptionEmphasizedDate>{date}</VoteDescriptionEmphasizedDate> with the possibility
+      for appeals. After that time you will be informed about the jury decision.
+    </>
   );
 };
 export default VoteWithoutCommit;

web/src/components/Popup/index.tsx

@@ -52,28 +52,31 @@ type PopupProps = IStakeWithdraw | IVoteWithoutCommit | IVoteWithCommit | IAppea
 
 const Header = styled.h1`
   display: flex;
-  margin-top: calc(12px + (32 - 12) * ((100vw - 300px) / (1250 - 300)));
-  margin-bottom: calc(12px + (24 - 12) * ((100vw - 300px) / (1250 - 300)));
+  margin-top: calc(12px + (32 - 12) * ((100vw - 375px) / (1250 - 375)));
+  margin-bottom: calc(12px + (24 - 12) * ((100vw - 375px) / (1250 - 375)));
+  margin-left: calc(8px + (12 - 8) * ((100vw - 375px) / (1250 - 375)));
+  margin-right: calc(8px + (12 - 8) * ((100vw - 375px) / (1250 - 375)));
+  text-align: center;
   font-size: 24px;
   font-weight: 600;
   line-height: 32.68px;
 `;
 
 const IconContainer = styled.div`
-  width: calc(150px + (350 - 150) * (100vw - 375px) / (1250 - 375));
+  width: calc(150px + (228 - 150) * (100vw - 375px) / (1250 - 375));
   display: flex;
   align-items: center;
   justify-content: center;
 
   svg {
     display: inline-block;
-    width: calc(150px + (350 - 150) * (100vw - 375px) / (1250 - 375));
-    height: calc(150px + (350 - 150) * (100vw - 375px) / (1250 - 375));
+    width: calc(150px + (228 - 150) * (100vw - 375px) / (1250 - 375));
+    height: calc(150px + (228 - 150) * (100vw - 375px) / (1250 - 375));
   }
 `;
 
 const StyledButton = styled(Button)`
-  margin: calc(16px + (32 - 16) * ((100vw - 300px) / (1250 - 300)));
+  margin: calc(16px + (32 - 16) * ((100vw - 375px) / (1250 - 375)));
 `;
 
 const Container = styled.div`
@@ -99,6 +102,24 @@ const Container = styled.div`
   }
 `;
 
+const VoteDescriptionContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: calc(16px + (32 - 16) * ((100vw - 375px) / (1250 - 375)));
+  margin-left: calc(8px + (32 - 8) * ((100vw - 375px) / (1250 - 375)));
+  margin-right: calc(8px + (32 - 8) * ((100vw - 375px) / (1250 - 375)));
+  color: ${({ theme }) => theme.secondaryText};
+  text-align: center;
+  line-height: 21.8px;
+`;
+
+export const VoteDescriptionEmphasizedDate = styled.span`
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 21.8px;
+  color: ${({ theme }) => theme.primaryText};
+`;
+
 const Popup: React.FC<PopupProps & IPopup> = ({
   title,
   icon: Icon,
@@ -128,12 +149,20 @@ const Popup: React.FC<PopupProps & IPopup> = ({
     }
     case PopupType.VOTE_WITHOUT_COMMIT: {
       const { date } = props as IVoteWithoutCommit;
-      PopupComponent = <VoteWithoutCommit date={date} />;
+      PopupComponent = (
+        <VoteDescriptionContainer>
+          <VoteWithoutCommit date={date} />
+        </VoteDescriptionContainer>
+      );
       break;
     }
     case PopupType.VOTE_WITH_COMMIT: {
       const { date } = props as IVoteWithCommit;
-      PopupComponent = <VoteWithCommit date={date} />;
+      PopupComponent = (
+        <VoteDescriptionContainer>
+          <VoteWithCommit date={date} />
+        </VoteDescriptionContainer>
+      );
       break;
     }
     case PopupType.APPEAL: {

web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx

@@ -84,12 +84,13 @@ const Fund: React.FC<IFund> = ({ amount, setAmount, setIsOpen }) => {
             onClick={() => {
               if (fundAppeal) {
                 setIsSending(true);
-                wrapWithToast(async () => await fundAppeal().then((response) => response.hash), publicClient).finally(
-                  () => {
-                    setIsSending(false);
+                wrapWithToast(async () => await fundAppeal().then((response) => response.hash), publicClient)
+                  .then(() => {
                     setIsOpen(true);
-                  }
-                );
+                  })
+                  .finally(() => {
+                    setIsSending(false);
+                  });
               }
             }}
           />

web/src/pages/Cases/CaseDetails/Voting/index.tsx

@@ -49,7 +49,7 @@ const Voting: React.FC<{
         <Popup
           title="Thanks for Voting"
           icon={VoteIcon}
-          popupType={disputeData?.court?.hiddenVotes ? PopupType.VOTE_WITHOUT_COMMIT : PopupType.VOTE_WITH_COMMIT}
+          popupType={disputeData?.court?.hiddenVotes ? PopupType.VOTE_WITH_COMMIT : PopupType.VOTE_WITHOUT_COMMIT}
           date={finalDate ? formatDate(finalDate) : ""}
           isCommit={false}
           setIsOpen={setIsPopupOpen}

web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx

@@ -99,9 +99,15 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
   const handleStake = () => {
     if (typeof setStake !== "undefined") {
       setIsSending(true);
-      wrapWithToast(async () => await setStake().then((response) => response.hash), publicClient).finally(() => {
+      wrapWithToast(
+        async () =>
+          await setStake().then((response) => {
+            setIsPopupOpen(true);
+            return response.hash;
+          }),
+        publicClient
+      ).finally(() => {
         setIsSending(false);
-        setIsPopupOpen(true);
       });
     }
   };