diff --git a/src/app/components/Staking/Form/StakingAmount.tsx b/src/app/components/Staking/Form/StakingAmount.tsx index da2a3f58..2ce5d531 100644 --- a/src/app/components/Staking/Form/StakingAmount.tsx +++ b/src/app/components/Staking/Form/StakingAmount.tsx @@ -23,7 +23,6 @@ export const StakingAmount: React.FC = ({ }) => { 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 = ({ }; 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 = ({ value, onStakingAmountSatChange, coinName, - blured, ]); const handleBlur = (_e: FocusEvent) => { @@ -115,7 +112,6 @@ export const StakingAmount: React.FC = ({ 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 1cee0b95..18230b71 100644 --- a/src/app/components/Staking/Staking.tsx +++ b/src/app/components/Staking/Staking.tsx @@ -367,7 +367,11 @@ export const Staking: React.FC = ({ 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"; }