Merge pull request #1806 from kleros/refactor/min-stake-check

refactor(web): min-stake-check

Author: alcercu

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

@@ -1,8 +1,6 @@
 import React, { useState, useMemo, useEffect } from "react";
 import styled from "styled-components";
 
-import { hoverShortTransitionTiming } from "styles/commonStyles";
-
 import { useParams } from "react-router-dom";
 import { useDebounce } from "react-use";
 
@@ -12,6 +10,10 @@ import { commify, uncommify } from "utils/commify";
 import { formatPNK, roundNumberDown } from "utils/format";
 import { isUndefined } from "utils/index";
 
+import { useCourtDetails } from "queries/useCourtDetails";
+
+import { hoverShortTransitionTiming } from "styles/commonStyles";
+
 import { NumberInputField } from "components/NumberInputField";
 
 import StakeWithdrawButton, { ActionType } from "./StakeWithdrawButton";
@@ -75,6 +77,7 @@ const InputDisplay: React.FC<IInputDisplay> = ({ action, amount, setAmount }) =>
 
   const { id } = useParams();
   const { balance, jurorBalance } = usePnkData({ courtId: id });
+  const { data: courtDetails } = useCourtDetails(id);
 
   const parsedBalance = formatPNK(balance ?? 0n, 0, true);
 
@@ -88,10 +91,18 @@ const InputDisplay: React.FC<IInputDisplay> = ({ action, amount, setAmount }) =>
       setErrorMsg("Insufficient balance to stake this amount");
     } else if (!isStaking && jurorBalance && parsedAmount > jurorBalance[2]) {
       setErrorMsg("Insufficient staked amount to withdraw this amount");
+    } else if (
+      action === ActionType.stake &&
+      courtDetails &&
+      jurorBalance &&
+      parsedAmount !== 0n &&
+      jurorBalance[2] + parsedAmount < BigInt(courtDetails?.court?.minStake)
+    ) {
+      setErrorMsg(`Min Stake in court is: ${formatPNK(courtDetails?.court?.minStake)} PNK`);
     } else {
       setErrorMsg(undefined);
     }
-  }, [parsedAmount, isStaking, balance, jurorBalance]);
+  }, [parsedAmount, isStaking, balance, jurorBalance, action, courtDetails]);
 
   return (
     <>

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

@@ -15,14 +15,14 @@ import {
   useSimulatePnkIncreaseAllowance,
   useWritePnkIncreaseAllowance,
 } from "hooks/contracts/generated";
-import { useCourtDetails } from "hooks/queries/useCourtDetails";
 import { useLockOverlayScroll } from "hooks/useLockOverlayScroll";
 import { usePnkData } from "hooks/usePNKData";
-import { formatETH } from "utils/format";
 import { isUndefined } from "utils/index";
 import { parseWagmiError } from "utils/parseWagmiError";
 import { refetchWithRetry } from "utils/refecthWithRetry";
 
+import { useCourtDetails } from "queries/useCourtDetails";
+
 import { EnsureChain } from "components/EnsureChain";
 
 import StakeWithdrawPopup from "./StakeWithdrawPopup";
@@ -67,9 +67,8 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
   const controllerRef = useRef<AbortController | null>(null);
   useLockOverlayScroll(isPopupOpen);
 
-  const { data: courtDetails } = useCourtDetails(id);
   const { balance, jurorBalance, allowance, refetchAllowance } = usePnkData({ courtId: id });
-
+  const { data: courtDetails } = useCourtDetails(id);
   const publicClient = usePublicClient();
 
   const isStaking = action === ActionType.stake;
@@ -181,6 +180,16 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
               )
             );
           });
+      } else {
+        updatePopupState(
+          signal,
+          getStakeSteps(
+            StakeSteps.StakeFailed,
+            ...commonArgs,
+            undefined,
+            new Error("Simulation Failed. Please restart the process.")
+          )
+        );
       }
     },
     [setStake, setStakeConfig, publicClient, amount, theme, action]
@@ -248,20 +257,20 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
 
   useEffect(() => {
     if (isPopupOpen) return;
-    if (
-      action === ActionType.stake &&
-      targetStake !== 0n &&
-      courtDetails &&
-      targetStake < BigInt(courtDetails.court?.minStake)
-    ) {
-      setErrorMsg(`Min Stake in court is: ${formatETH(courtDetails?.court?.minStake)}`);
-    } else if (setStakeError || allowanceError) {
+    if (setStakeError || allowanceError) {
       setErrorMsg(parseWagmiError(setStakeError || allowanceError));
     }
-  }, [setStakeError, setErrorMsg, targetStake, courtDetails, allowanceError, isPopupOpen, action]);
+  }, [setStakeError, setErrorMsg, targetStake, allowanceError, isPopupOpen]);
 
   const isDisabled = useMemo(() => {
-    if (parsedAmount == 0n) return true;
+    if (
+      parsedAmount == 0n ||
+      (action === ActionType.stake &&
+        targetStake !== 0n &&
+        courtDetails &&
+        targetStake < BigInt(courtDetails?.court?.minStake))
+    )
+      return true;
     if (isAllowance) {
       return isUndefined(increaseAllowanceConfig) || isSimulatingAllowance || !isUndefined(allowanceError);
     }
@@ -275,6 +284,9 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
     setStakeError,
     allowanceError,
     isAllowance,
+    targetStake,
+    action,
+    courtDetails,
   ]);
 
   const closePopup = () => {