fix: validate staking amount while filling the form

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-staking",
-  "version": "0.2.32",
+  "version": "0.2.33",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/app/components/Staking/Form/StakingAmount.tsx

@@ -23,6 +23,8 @@ export const StakingAmount: React.FC<StakingAmountProps> = ({
 }) => {
   const [value, setValue] = useState("");
   const [error, setError] = useState("");
+  const [blured, setBlured] = useState(false);
+
   // Track if the input field has been interacted with
   const [touched, setTouched] = useState(false);
 
@@ -51,17 +53,10 @@ export const StakingAmount: React.FC<StakingAmountProps> = ({
     }
   };
 
-  const handleBlur = (_e: FocusEvent<HTMLInputElement>) => {
-    if (!btcWalletBalanceSat) return;
-    setTouched(true);
-
-    if (value === "") {
-      onStakingAmountSatChange(0);
-      setError(generalErrorMessage);
-      return;
-    }
-
+  useEffect(() => {
+    if (btcWalletBalanceSat === undefined) return;
     const numValue = parseFloat(value);
+    if (!numValue) return;
     const satoshis = btcToSatoshi(numValue);
 
     // Run all validations
@@ -103,6 +98,24 @@ export const StakingAmount: React.FC<StakingAmountProps> = ({
       onStakingAmountSatChange(satoshis);
       setValue(maxDecimals(satoshiToBtc(satoshis), 8).toString());
     }
+  }, [
+    btcWalletBalanceSat,
+    minStakingAmountSat,
+    maxStakingAmountSat,
+    value,
+    onStakingAmountSatChange,
+    coinName,
+    blured,
+  ]);
+
+  const handleBlur = (_e: FocusEvent<HTMLInputElement>) => {
+    if (value === "") {
+      onStakingAmountSatChange(0);
+      setError(generalErrorMessage);
+      return;
+    }
+    setTouched(true);
+    setBlured(!blured);
   };
 
   const minStakeAmount = maxDecimals(satoshiToBtc(minStakingAmountSat), 8);

src/app/components/Staking/Staking.tsx

@@ -366,10 +366,15 @@ export const Staking: React.FC<StakingProps> = ({
         );
         return stakingFeeSat;
       } catch (error: Error | any) {
+        let errorMsg = error?.message;
+        if (error?.message.includes("Insufficient funds")) {
+          errorMsg =
+            "Not enough balance to cover staking amount and fees, please lower the staking amount";
+        }
         // fees + staking amount can be more than the balance
         showError({
           error: {
-            message: error.message,
+            message: errorMsg,
             errorState: ErrorState.STAKING,
             errorTime: new Date(),
           },