fix: handle the empty value check before parsing it into a num

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

@@ -23,7 +23,6 @@ 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);
@@ -54,9 +53,8 @@ export const StakingAmount: React.FC<StakingAmountProps> = ({
   };
 
   useEffect(() => {
-    if (btcWalletBalanceSat === undefined) return;
+    if (btcWalletBalanceSat === undefined || value === "") return;
     const numValue = parseFloat(value);
-    if (!numValue) return;
     const satoshis = btcToSatoshi(numValue);
 
     // Run all validations
@@ -105,7 +103,6 @@ export const StakingAmount: React.FC<StakingAmountProps> = ({
     value,
     onStakingAmountSatChange,
     coinName,
-    blured,
   ]);
 
   const handleBlur = (_e: FocusEvent<HTMLInputElement>) => {
@@ -115,7 +112,6 @@ export const StakingAmount: React.FC<StakingAmountProps> = ({
       return;
     }
     setTouched(true);
-    setBlured(!blured);
   };
 
   const minStakeAmount = maxDecimals(satoshiToBtc(minStakingAmountSat), 8);

src/app/components/Staking/Staking.tsx

@@ -367,7 +367,11 @@ export const Staking: React.FC<StakingProps> = ({
         return stakingFeeSat;
       } catch (error: Error | any) {
         let errorMsg = error?.message;
-        if (error?.message.includes("Insufficient funds")) {
+        // 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";
         }