Merge main into dev branch 5 (#81)

package.json

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

src/app/components/Staking/FinalityProviders/FinalityProviders.tsx

@@ -14,8 +14,6 @@ import { useError } from "@/app/context/Error/ErrorContext";
 import { useFinalityProvidersData } from "@/app/hooks/finalityProviders/useFinalityProvidersData";
 import { ErrorState } from "@/app/types/errors";
 import { FinalityProvidersProps } from "@/app/types/finalityProviders";
-import { getNetworkConfig } from "@/config/network.config";
-import { Network } from "@/utils/wallet/wallet_provider";
 
 import { FinalityProvider } from "./FinalityProvider";
 import { FinalityProviderSearch } from "./FinalityProviderSearch";
@@ -102,25 +100,9 @@ export const FinalityProviders: React.FC<FinalityProvidersProps> = ({
     return <LoadingView />;
   }
 
-  const network = getNetworkConfig().network;
-  const createFinalityProviderLink = `https://github.com/babylonlabs-io/networks/tree/main/${
-    network == Network.MAINNET ? "bbn-1" : "bbn-test-4"
-  }/finality-providers`;
-
   return (
     <>
-      <p>
-        Select a finality provider or{" "}
-        <a
-          href={createFinalityProviderLink}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="sublink text-primary hover:underline"
-        >
-          create your own
-        </a>
-        .
-      </p>
+      <p>Select a finality provider.</p>
       <div className="flex gap-3">
         <FinalityProviderSearch onSearch={handleSearch} />
       </div>

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

@@ -363,10 +363,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(),
           },