Merge pull request #1585 from kleros/fix/staking-input-behaviour

Fix/staking input behaviour

Author: alcercu

web/src/components/NumberInputField.tsx

@@ -56,12 +56,19 @@ export const NumberInputField: React.FC<INumberInputField> = ({
     <Container {...{ className }}>
       {isEditing ? (
         <StyledField
-          type="number"
+          type="text"
+          onInput={(e) => {
+            const value = e.currentTarget.value.replace(/[^0-9.]/g, "");
+
+            e.currentTarget.value = formatter ? formatter(value) : value;
+            return e;
+          }}
           onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
             onChange?.(event.target.value);
           }}
           onBlur={toggleEditing}
-          {...{ value, placeholder, message, variant }}
+          value={formatter ? formatter(value ?? "0") : value}
+          {...{ placeholder, message, variant }}
         />
       ) : (
         <StyledField

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

@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from "react";
+import React, { useState, useMemo, useEffect } from "react";
 import styled from "styled-components";
 
 import { useParams } from "react-router-dom";
@@ -68,11 +68,10 @@ const InputDisplay: React.FC<IInputDisplay> = ({
   setAmount,
 }) => {
   const [debouncedAmount, setDebouncedAmount] = useState("");
+  const [errorMsg, setErrorMsg] = useState<string | undefined>();
   useDebounce(() => setDebouncedAmount(amount), 500, [amount]);
   const parsedAmount = useParsedAmount(uncommify(debouncedAmount) as `${number}`);
 
-  const [errorMsg, setErrorMsg] = useState<string | undefined>();
-
   const { id } = useParams();
   const { address } = useAccount();
   const { data: balance } = usePnkBalanceOf({
@@ -89,6 +88,18 @@ const InputDisplay: React.FC<IInputDisplay> = ({
   const parsedStake = formatPNK(jurorBalance?.[2] || 0n, 0, true);
   const isStaking = useMemo(() => action === ActionType.stake, [action]);
 
+  useEffect(() => {
+    if (parsedAmount > 0n && balance === 0n && isStaking) {
+      setErrorMsg("You need a non-zero PNK balance to stake");
+    } else if (isStaking && balance && parsedAmount > balance) {
+      setErrorMsg("Insufficient balance to stake this amount");
+    } else if (!isStaking && jurorBalance && parsedAmount > jurorBalance[2]) {
+      setErrorMsg("Insufficient staked amount to withdraw this amount");
+    } else {
+      setErrorMsg(undefined);
+    }
+  }, [parsedAmount, isStaking, balance, jurorBalance]);
+
   return (
     <>
       <LabelArea>
@@ -112,7 +123,7 @@ const InputDisplay: React.FC<IInputDisplay> = ({
             placeholder={isStaking ? "Amount to stake" : "Amount to withdraw"}
             message={errorMsg ?? undefined}
             variant={!isUndefined(errorMsg) ? "error" : "info"}
-            formatter={(number: string) => commify(roundNumberDown(Number(number)))}
+            formatter={(number: string) => (number !== "" ? commify(roundNumberDown(Number(number))) : "")}
           />
           <EnsureChainContainer>
             <StakeWithdrawButton
@@ -123,7 +134,6 @@ const InputDisplay: React.FC<IInputDisplay> = ({
                 isSending,
                 setIsSending,
                 setIsPopupOpen,
-                setErrorMsg,
               }}
             />
           </EnsureChainContainer>

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useEffect } from "react";
+import React, { useMemo } from "react";
 
 import { useParams } from "react-router-dom";
 import { useAccount, usePublicClient } from "wagmi";
@@ -34,7 +34,6 @@ interface IActionButton {
   setIsSending: (arg0: boolean) => void;
   setAmount: (arg0: string) => void;
   setIsPopupOpen: (arg0: boolean) => void;
-  setErrorMsg: (arg0: string | undefined) => void;
 }
 
 const StakeWithdrawButton: React.FC<IActionButton> = ({
@@ -43,7 +42,6 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
   isSending,
   setIsSending,
   setIsPopupOpen,
-  setErrorMsg,
 }) => {
   const { id } = useParams();
   const { address } = useAccount();
@@ -82,7 +80,7 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
     return 0n;
   }, [jurorBalance, parsedAmount, isAllowance, isStaking]);
 
-  const { config: increaseAllowanceConfig, error: allowanceError } = usePreparePnkIncreaseAllowance({
+  const { config: increaseAllowanceConfig } = usePreparePnkIncreaseAllowance({
     enabled: isAllowance && !isUndefined(klerosCore) && !isUndefined(targetStake) && !isUndefined(allowance),
     args: [klerosCore?.address, BigInt(targetStake ?? 0) - BigInt(allowance ?? 0)],
   });
@@ -99,7 +97,7 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
   };
 
   const { config: setStakeConfig, error: setStakeError } = usePrepareKlerosCoreSetStake({
-    enabled: !isUndefined(targetStake) && !isUndefined(id) && !isAllowance,
+    enabled: !isUndefined(targetStake) && !isUndefined(id) && !isAllowance && parsedAmount !== 0n,
     args: [BigInt(id ?? 0), targetStake],
   });
   const { writeAsync: setStake } = useKlerosCoreSetStake(setStakeConfig);
@@ -114,14 +112,6 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
     }
   };
 
-  useEffect(() => {
-    if (isAllowance) {
-      setErrorMsg(allowanceError?.shortMessage);
-    } else {
-      setErrorMsg(setStakeError?.shortMessage);
-    }
-  }, [allowanceError, setStakeError, isAllowance, isStaking, setErrorMsg]);
-
   const buttonProps = {
     [ActionType.allowance]: {
       text: "Allow PNK",
@@ -161,4 +151,4 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
   );
 };
 
-export default StakeWithdrawButton;
+export default StakeWithdrawButton;