Merge pull request #1797 from kleros/fix/stake-input

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

Author: alcercu

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

@@ -69,6 +69,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}`);
 
@@ -113,8 +114,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>
@@ -125,6 +126,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