Sync from main to dev

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-staking",
-  "version": "0.2.32",
+  "version": "0.2.33",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -28,7 +28,7 @@
     "@scure/bip32": "^1.4.0",
     "@tanstack/react-query": "^5.28.14",
     "@tanstack/react-query-next-experimental": "^5.28.14",
-    "axios": "^1.6.8",
+    "axios": "^1.7.4",
     "bitcoinjs-lib": "^6.1.5",
     "btc-staking-ts": "^0.2.8",
     "date-fns": "^3.6.0",

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

@@ -23,6 +23,7 @@ export const StakingAmount: React.FC<StakingAmountProps> = ({
 }) => {
   const [value, setValue] = useState("");
   const [error, setError] = useState("");
+
   // Track if the input field has been interacted with
   const [touched, setTouched] = useState(false);
 
@@ -51,16 +52,8 @@ 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 || value === "") return;
     const numValue = parseFloat(value);
     const satoshis = btcToSatoshi(numValue);
 
@@ -103,6 +96,22 @@ export const StakingAmount: React.FC<StakingAmountProps> = ({
       onStakingAmountSatChange(satoshis);
       setValue(maxDecimals(satoshiToBtc(satoshis), 8).toString());
     }
+  }, [
+    btcWalletBalanceSat,
+    minStakingAmountSat,
+    maxStakingAmountSat,
+    value,
+    onStakingAmountSatChange,
+    coinName,
+  ]);
+
+  const handleBlur = (_e: FocusEvent<HTMLInputElement>) => {
+    if (value === "") {
+      onStakingAmountSatChange(0);
+      setError(generalErrorMessage);
+      return;
+    }
+    setTouched(true);
   };
 
   const minStakeAmount = maxDecimals(satoshiToBtc(minStakingAmountSat), 8);

src/app/components/Staking/Staking.tsx

@@ -366,10 +366,19 @@ export const Staking: React.FC<StakingProps> = ({
         );
         return stakingFeeSat;
       } catch (error: Error | any) {
+        let errorMsg = error?.message;
+        // Turn the error message into a user-friendly message
+        // The btc-staking-ts lib will be improved to return propert error types
+        // in the future. For now, we need to handle the errors manually by
+        // matching the error message.
+        if (errorMsg.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(),
           },