From e125d02f9d79407d886a3ca937004b8b8ee53f18 Mon Sep 17 00:00:00 2001
From: wjrjerome <wjrjerome@babylonchain.io>
Date: Tue, 13 Aug 2024 18:24:07 +1000
Subject: [PATCH] fix: validate staking amount while filling the form

---
 package-lock.json                             |  4 +--
 package.json                                  |  2 +-
 .../components/Staking/Form/StakingAmount.tsx | 33 +++++++++++++------
 src/app/components/Staking/Staking.tsx        |  7 +++-
 4 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e3228569..36acca3e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "simple-staking",
-  "version": "0.2.32",
+  "version": "0.2.33",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "simple-staking",
-      "version": "0.2.32",
+      "version": "0.2.33",
       "dependencies": {
         "@bitcoinerlab/secp256k1": "^1.1.1",
         "@keystonehq/animated-qr": "^0.8.6",
diff --git a/package.json b/package.json
index 1657ae19..a4527f53 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simple-staking",
-  "version": "0.2.32",
+  "version": "0.2.33",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/src/app/components/Staking/Form/StakingAmount.tsx b/src/app/components/Staking/Form/StakingAmount.tsx
index a680754b..da2a3f58 100644
--- a/src/app/components/Staking/Form/StakingAmount.tsx
+++ b/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);
diff --git a/src/app/components/Staking/Staking.tsx b/src/app/components/Staking/Staking.tsx
index 85cbcc0b..1cee0b95 100644
--- a/src/app/components/Staking/Staking.tsx
+++ b/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(),
           },