fix(web): stake-input-error-display

Author: tractorss

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

@@ -1,5 +1,5 @@
 import React, { useState, useMemo, useEffect } from "react";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 
 import { useParams } from "react-router-dom";
 import { useDebounce } from "react-use";
@@ -10,8 +10,6 @@ import { commify, uncommify } from "utils/commify";
 import { formatPNK, roundNumberDown } from "utils/format";
 import { isUndefined } from "utils/index";
 
-import { landscapeStyle } from "styles/landscapeStyle";
-
 import { NumberInputField } from "components/NumberInputField";
 
 import StakeWithdrawButton, { ActionType } from "./StakeWithdrawButton";
@@ -64,6 +62,7 @@ interface IInputDisplay {
 const InputDisplay: React.FC<IInputDisplay> = ({ action, amount, setAmount }) => {
   const [debouncedAmount, setDebouncedAmount] = useState("");
   const [errorMsg, setErrorMsg] = useState<string | undefined>();
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
   useDebounce(() => setDebouncedAmount(amount), 500, [amount]);
   const parsedAmount = useParsedAmount(uncommify(debouncedAmount) as `${number}`);
 
@@ -108,8 +107,8 @@ const InputDisplay: React.FC<IInputDisplay> = ({ action, amount, setAmount }) =>
               setAmount(e);
             }}
             placeholder={isStaking ? "Amount to stake" : "Amount to withdraw"}
-            message={errorMsg ?? undefined}
-            variant={!isUndefined(errorMsg) ? "error" : "info"}
+            message={isPopupOpen ? undefined : (errorMsg ?? undefined)}
+            variant={!isUndefined(errorMsg) && !isPopupOpen ? "error" : "info"}
             formatter={(number: string) => (number !== "" ? commify(roundNumberDown(Number(number))) : "")}
           />
           <EnsureChainContainer>
@@ -120,6 +119,8 @@ const InputDisplay: React.FC<IInputDisplay> = ({ action, amount, setAmount }) =>
                 action,
                 setAmount,
                 setErrorMsg,
+                isPopupOpen,
+                setIsPopupOpen,
               }}
             />
           </EnsureChainContainer>

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

@@ -46,13 +46,22 @@ interface IActionButton {
   parsedAmount: bigint;
   action: ActionType;
   setAmount: (arg0: string) => void;
-  setErrorMsg: (msg: string) => void;
+  setErrorMsg: (msg?: string) => void;
+  isPopupOpen: boolean;
+  setIsPopupOpen: (arg0: boolean) => void;
 }
 
-const StakeWithdrawButton: React.FC<IActionButton> = ({ amount, parsedAmount, action, setErrorMsg, setAmount }) => {
+const StakeWithdrawButton: React.FC<IActionButton> = ({
+  amount,
+  parsedAmount,
+  action,
+  setErrorMsg,
+  setAmount,
+  isPopupOpen,
+  setIsPopupOpen,
+}) => {
   const { id } = useParams();
   const theme = useTheme();
-  const [isPopupOpen, setIsPopupOpen] = useState(false);
   const [isSuccess, setIsSuccess] = useState(false);
   const [popupStepsState, setPopupStepsState] = useState<Steps>();
   const controllerRef = useRef<AbortController | null>(null);
@@ -234,6 +243,7 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({ amount, parsedAmount, ac
     amount,
     refetchAllowance,
     refetchSetStake,
+    setIsPopupOpen,
   ]);
 
   useEffect(() => {
@@ -268,6 +278,7 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({ amount, parsedAmount, ac
   ]);
 
   const closePopup = () => {
+    setErrorMsg(undefined);
     setIsPopupOpen(false);
     setIsSuccess(false);
     setAmount("");

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

@@ -111,7 +111,7 @@ interface IStakeWithdrawPopup {
 }
 
 const StakeWithdrawPopup: React.FC<IStakeWithdrawPopup> = ({ amount, closePopup, steps, isSuccess, action }) => {
-  const { data: phase } = useSortitionModulePhase();
+  const { data: phase, isLoading } = useSortitionModulePhase();
 
   return (
     <Overlay onClick={closePopup}>
@@ -121,7 +121,7 @@ const StakeWithdrawPopup: React.FC<IStakeWithdrawPopup> = ({ amount, closePopup,
           <Header {...{ amount, isSuccess, action }} />
           <Divider />
           {steps && <CustomTimeline items={steps} />}
-          {phase !== Phases.staking ? (
+          {phase !== Phases.staking && !isLoading ? (
             <InfoContainer>
               <Divider />
               <StyledInfoCard