refactor(web): Error handling logic

Author: ShubhamParkhi

web/src/components/NumberInputField.tsx

@@ -35,6 +35,7 @@ interface INumberInputField extends Omit<React.ComponentProps<typeof Field>, "on
   onChange?: (value: string) => void;
   formatter?: (value: string) => string;
   className?: string;
+  min?: number;
 }
 
 export const NumberInputField: React.FC<INumberInputField> = ({
@@ -45,6 +46,7 @@ export const NumberInputField: React.FC<INumberInputField> = ({
   formatter,
   className,
   variant = "info",
+  min,
 }) => {
   const [isEditing, setIsEditing] = useState(false);
 
@@ -61,14 +63,14 @@ export const NumberInputField: React.FC<INumberInputField> = ({
             onChange?.(event.target.value);
           }}
           onBlur={toggleEditing}
-          {...{ value, placeholder, message, variant }}
+          {...{ value, placeholder, message, variant, min }}
         />
       ) : (
         <StyledField
           type="text"
           value={formatter ? formatter(value ?? "0") : value}
           onFocus={toggleEditing}
-          {...{ placeholder, message, variant }}
+          {...{ placeholder, message, variant, min }}
           readOnly
         />
       )}

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

@@ -89,8 +89,8 @@ const InputDisplay: React.FC<IInputDisplay> = ({
   const isStaking = useMemo(() => action === ActionType.stake, [action]);
 
   useEffect(() => {
-    if (parsedAmount === 0n) {
-      setErrorMsg(undefined);
+    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]) {
@@ -124,6 +124,7 @@ const InputDisplay: React.FC<IInputDisplay> = ({
             message={errorMsg ?? undefined}
             variant={!isUndefined(errorMsg) ? "error" : "info"}
             formatter={(number: string) => commify(roundNumberDown(Number(number)))}
+            min="0"
           />
           <EnsureChainContainer>
             <StakeWithdrawButton