refactor(web): Error handling logic

Author: ShubhamParkhi

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,11 @@ const InputDisplay: React.FC<IInputDisplay> = ({
   setAmount,
 }) => {
   const [debouncedAmount, setDebouncedAmount] = useState("");
+  const [hasInteracted, setHasInteracted] = useState(false);
+  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 +89,18 @@ const InputDisplay: React.FC<IInputDisplay> = ({
   const parsedStake = formatPNK(jurorBalance?.[2] || 0n, 0, true);
   const isStaking = useMemo(() => action === ActionType.stake, [action]);
 
+  useEffect(() => {
+    if (!hasInteracted || parsedAmount === 0n) {
+      setErrorMsg(undefined);
+    } 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);
+    }
+  }, [hasInteracted, parsedAmount, isStaking, balance, jurorBalance]);
+
   return (
     <>
       <LabelArea>
@@ -97,6 +109,7 @@ const InputDisplay: React.FC<IInputDisplay> = ({
           onClick={() => {
             const amount = isStaking ? parsedBalance : parsedStake;
             setAmount(amount);
+            setHasInteracted(true);
           }}
         >
           {isStaking ? "Stake" : "Withdraw"} all
@@ -108,6 +121,7 @@ const InputDisplay: React.FC<IInputDisplay> = ({
             value={uncommify(amount)}
             onChange={(e) => {
               setAmount(e);
+              setHasInteracted(true);
             }}
             placeholder={isStaking ? "Amount to stake" : "Amount to withdraw"}
             message={errorMsg ?? undefined}
@@ -124,6 +138,8 @@ const InputDisplay: React.FC<IInputDisplay> = ({
                 setIsSending,
                 setIsPopupOpen,
                 setErrorMsg,
+                hasInteracted,
+                setHasInteracted,
               }}
             />
           </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";
@@ -35,6 +35,8 @@ interface IActionButton {
   setAmount: (arg0: string) => void;
   setIsPopupOpen: (arg0: boolean) => void;
   setErrorMsg: (arg0: string | undefined) => void;
+  hasInteracted: boolean;
+  setHasInteracted: (arg0: boolean) => void;
 }
 
 const StakeWithdrawButton: React.FC<IActionButton> = ({
@@ -43,7 +45,7 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
   isSending,
   setIsSending,
   setIsPopupOpen,
-  setErrorMsg,
+  setHasInteracted,
 }) => {
   const { id } = useParams();
   const { address } = useAccount();
@@ -82,7 +84,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 +101,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,19 +116,6 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
     }
   };
 
-useEffect(() => {
-  let errorMessage = parsedAmount === 0n
-    ? "Please enter a valid amount to stake or withdraw."
-    : "There was an error processing your request. Please try again later.";
-
-  if (isAllowance && allowanceError?.shortMessage) {
-    setErrorMsg(errorMessage);
-  } else if (!isAllowance && setStakeError?.shortMessage) {
-    setErrorMsg(errorMessage);
-  }
-}, [allowanceError, setStakeError, isAllowance, isStaking, parsedAmount, setErrorMsg]);
-
-
   const buttonProps = {
     [ActionType.allowance]: {
       text: "Allow PNK",
@@ -160,10 +149,13 @@ useEffect(() => {
           (targetStake !== 0n && targetStake < BigInt(courtDetails.court?.minStake)) ||
           (isStaking && !isAllowance && isUndefined(setStakeConfig.request))
         }
-        onClick={onClick}
+        onClick={() => {
+          setHasInteracted(true);
+          onClick();
+        }}
       />
     </EnsureChain>
   );
 };
 
-export default StakeWithdrawButton;
+export default StakeWithdrawButton;