feat: dynamic popup text if shutter dispute kit

Author: kemuru

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

@@ -3,17 +3,20 @@ import React from "react";
 import { VoteDescriptionEmphasizedDate } from "components/Popup";
 
 interface IVoteWithCommit {
-  date: string;
+  date?: string;
+  automaticVoteReveal?: boolean;
 }
 
-const VoteWithCommit: React.FC<IVoteWithCommit> = ({ date }) => {
-  return (
+const VoteWithCommit: React.FC<IVoteWithCommit> = ({ date, automaticVoteReveal = false }) =>
+  automaticVoteReveal ? (
+    <div>Your vote is confirmed. It's kept secret until all jurors have cast their votes.</div>
+  ) : (
     <div>
       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>
     </div>
   );
-};
+
 export default VoteWithCommit;

web/src/components/Popup/ExtraInfo/VoteWithCommitExtraInfo.tsx

@@ -12,7 +12,15 @@ const StyledInfoCard = styled(InfoCard)`
   line-height: 19px;
 `;
 
-const VoteWithCommitExtraInfo: React.FC = () => {
-  return <StyledInfoCard msg="Subscribe to receive notifications to be reminded when the reveal time comes." />;
+interface Props {
+  automaticVoteReveal?: boolean;
+}
+
+const VoteWithCommitExtraInfo: React.FC<Props> = ({ automaticVoteReveal = false }) => {
+  const msg = automaticVoteReveal
+    ? "Enable notifications to be updated about the progress of the case: Settings > Notifications"
+    : "Enable notifications to be reminded when the reveal time comes: Settings > Notifications";
+  return <StyledInfoCard msg={msg} />;
 };
+
 export default VoteWithCommitExtraInfo;

web/src/components/Popup/index.tsx

@@ -168,6 +168,7 @@ interface IPopup {
   setIsOpen: (val: boolean) => void;
   setAmount?: (val: string) => void;
   isCommit?: boolean;
+  automaticVoteReveal?: boolean;
 }
 
 type PopupProps = IStakeWithdraw | IVoteWithoutCommit | IVoteWithCommit | IAppeal | IDisputeCreated | ISwapSuccess;
@@ -179,6 +180,7 @@ const Popup: React.FC<PopupProps & IPopup> = ({
   setIsOpen,
   setAmount,
   isCommit,
+  automaticVoteReveal,
   ...props
 }) => {
   const containerRef = useRef(null);
@@ -213,7 +215,7 @@ const Popup: React.FC<PopupProps & IPopup> = ({
       const { date } = props as IVoteWithCommit;
       PopupComponent = (
         <VoteDescriptionContainer>
-          <VoteWithCommit date={date} />
+          <VoteWithCommit {...{ date, automaticVoteReveal }} />
         </VoteDescriptionContainer>
       );
       break;
@@ -260,7 +262,7 @@ const Popup: React.FC<PopupProps & IPopup> = ({
           </IconContainer>
         )}
         {popupType === PopupType.STAKE_WITHDRAW && <StakeWithdrawExtraInfo />}
-        {popupType === PopupType.VOTE_WITH_COMMIT && <VoteWithCommitExtraInfo />}
+        {popupType === PopupType.VOTE_WITH_COMMIT && <VoteWithCommitExtraInfo {...{ automaticVoteReveal }} />}
         {popupType === PopupType.DISPUTE_CREATED && <DisputeCreatedExtraInfo />}
         {popupType !== PopupType.SWAP_SUCCESS && (
           <StyledButton

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

@@ -111,6 +111,7 @@ const Voting: React.FC<IVoting> = ({ arbitrable, currentPeriodIndex, dispute })
           date={finalDate ? formatDate(finalDate) : ""}
           isCommit={false}
           setIsOpen={setIsPopupOpen}
+          automaticVoteReveal={isShutterDisputeKit}
         />
       )}
       {userWasDrawn && isCommitOrVotePeriod && !voted ? (