Merge pull request #1818 from kleros/feat/stake-popup-subscribe-notification

feat(web): stake-popup-notification-info

Author: alcercu

web/src/pages/Courts/CourtDetails/StakePanel/Simulator/QuantityToSimulate.tsx

@@ -17,7 +17,7 @@ const Container = styled.div`
   justify-content: center;
 `;
 
-const TextWithTooltipContainer = styled.div`
+export const TextWithTooltipContainer = styled.div`
   color: ${({ theme }) => theme.secondaryPurple};
   font-size: 14px;
 
@@ -29,7 +29,7 @@ const TextWithTooltipContainer = styled.div`
   }
 `;
 
-const Quantity = styled.p`
+export const Quantity = styled.p`
   font-size: 14px;
   color: ${({ theme }) => theme.primaryText};
   margin: 0;

web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawPopup/Header.tsx

@@ -1,18 +1,23 @@
 import React, { useMemo } from "react";
 import styled from "styled-components";
 
+import Skeleton from "react-loading-skeleton";
 import { useParams } from "react-router-dom";
 import { formatEther } from "viem";
 import { useAccount } from "wagmi";
 
 import Check from "svgs/icons/check-circle-outline.svg";
 
 import { useCourtDetails } from "hooks/queries/useCourtDetails";
-import { uncommify } from "utils/commify";
+import { commify, uncommify } from "utils/commify";
 
 import { useJurorStakeDetailsQuery } from "queries/useJurorStakeDetailsQuery";
 
-import QuantityToSimulate from "../Simulator/QuantityToSimulate";
+import { isUndefined } from "src/utils";
+
+import WithHelpTooltip from "components/WithHelpTooltip";
+
+import QuantityToSimulate, { Quantity, TextWithTooltipContainer } from "../Simulator/QuantityToSimulate";
 import { ActionType } from "../StakeWithdrawButton";
 
 const StakingMsgContainer = styled.div`
@@ -43,11 +48,17 @@ const CheckIcon = styled(Check)`
   height: 80px;
 `;
 
-const CourtName = styled.label``;
+const CourtName = styled.label`
+  margin-bottom: 15px;
+`;
 
-const StyledQuantityToSimulate = styled(QuantityToSimulate)`
-  margin-top: 15px;
+const QuantityContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
 `;
+
 interface IHeader {
   action: ActionType;
   amount: string;
@@ -63,6 +74,12 @@ const Header: React.FC<IHeader> = ({ action, amount, isSuccess }) => {
   const jurorCurrentEffectiveStake = address && jurorStakeData ? Number(formatEther(jurorStakeData.effectiveStake)) : 0;
   const jurorCurrentSpecificStake = address && jurorStakeData ? Number(formatEther(jurorStakeData.staked)) : 0;
 
+  const effectiveStakeDisplay = !isUndefined(jurorCurrentEffectiveStake) ? (
+    `${commify(jurorCurrentEffectiveStake)} PNK`
+  ) : (
+    <Skeleton width={50} />
+  );
+
   const isWithdraw = action === ActionType.withdraw;
   const preStakeText = useMemo(() => (isWithdraw ? "withdrawing" : "staking"), [isWithdraw]);
   const postStakeText = useMemo(() => (isWithdraw ? "withdrew" : "staked"), [isWithdraw]);
@@ -73,8 +90,17 @@ const Header: React.FC<IHeader> = ({ action, amount, isSuccess }) => {
       <StakingMsg>{isSuccess ? `You successfully ${postStakeText}` : `You are ${preStakeText}`}</StakingMsg>
       <StakingAmount>{amount} PNK</StakingAmount>
       {courtDetails?.court?.name ? <CourtName>on {courtDetails.court.name}</CourtName> : null}
-      {isSuccess ? null : (
-        <StyledQuantityToSimulate
+      {isSuccess ? (
+        <QuantityContainer>
+          <Quantity>{effectiveStakeDisplay}</Quantity>
+          <TextWithTooltipContainer>
+            <WithHelpTooltip tooltipMsg="The stake is confirmed! It is standard procedure to delay the execution of a change in stakes if the phase of the arbitrator is not currently Staking. It'll be updated shortly.">
+              Current Stake
+            </WithHelpTooltip>
+          </TextWithTooltipContainer>{" "}
+        </QuantityContainer>
+      ) : (
+        <QuantityToSimulate
           {...{
             jurorCurrentEffectiveStake,
             jurorCurrentSpecificStake,

web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawPopup/index.tsx

@@ -1,20 +1,16 @@
 import React from "react";
 import styled, { css, keyframes } from "styled-components";
 
-import { _TimelineItem1, CustomTimeline } from "@kleros/ui-components-library";
+import { _TimelineItem1, AlertMessage, CustomTimeline } from "@kleros/ui-components-library";
 
 import Close from "svgs/icons/close.svg";
 
-import { useSortitionModulePhase } from "hooks/useSortitionModule";
-
 import { landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
 import { Divider } from "components/Divider";
-import InfoCard from "components/InfoCard";
 import LightButton from "components/LightButton";
 import { Overlay } from "components/Overlay";
-import { Phases } from "components/Phase";
 
 import { ActionType } from "../StakeWithdrawButton";
 
@@ -92,16 +88,10 @@ const StyledButton = styled(LightButton)`
   }
 `;
 
-const InfoContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  margin-top: 8px;
+const AlertContainer = styled.div`
+  margin-top: 24px;
 `;
 
-const StyledInfoCard = styled(InfoCard)`
-  font-size: 14px;
-`;
 interface IStakeWithdrawPopup {
   action: ActionType;
   amount: string;
@@ -111,8 +101,6 @@ interface IStakeWithdrawPopup {
 }
 
 const StakeWithdrawPopup: React.FC<IStakeWithdrawPopup> = ({ amount, closePopup, steps, isSuccess, action }) => {
-  const { data: phase, isLoading } = useSortitionModulePhase();
-
   return (
     <Overlay onClick={closePopup}>
       <Container onClick={(e) => e.stopPropagation()}>
@@ -121,13 +109,14 @@ const StakeWithdrawPopup: React.FC<IStakeWithdrawPopup> = ({ amount, closePopup,
           <Header {...{ amount, isSuccess, action }} />
           <Divider />
           {steps && <CustomTimeline items={steps} />}
-          {phase !== Phases.staking && !isLoading ? (
-            <InfoContainer>
-              <Divider />
-              <StyledInfoCard
-                msg={`The ${action === ActionType.stake ? "stake" : "withdraw"} might be delayed by ~1 hr.`}
+          {isSuccess && action === ActionType.stake ? (
+            <AlertContainer>
+              <AlertMessage
+                title="Hey there! Avoid missing a case"
+                msg="Make sure to subscribe to notifications on Settings > Notifications"
+                variant="info"
               />
-            </InfoContainer>
+            </AlertContainer>
           ) : null}
         </InnerContainer>
       </Container>