fix: issue with fee UI react rendering loop (#66)

* fix: issue with fee UI infinite react rendering loop

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-staking",
-  "version": "0.2.31",
+  "version": "0.2.32",
   "private": true,
   "scripts": {
     "dev": "next dev",

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

@@ -51,22 +51,20 @@ export const StakingFee: React.FC<StakingFeeProps> = ({
       <div className="flex flex-col justify-center gap-1 items-center">
         <div className="min-h-8 flex justify-center flex-col items-center">
           {mempoolFeeRates ? (
-            <p>
-              Recommended fee rate: <strong>{defaultFeeRate} sats/vB</strong>
-            </p>
+            <div>
+              <p>
+                Recommended fee rate: <strong>{defaultFeeRate} sats/vB</strong>
+              </p>
+              <p>
+                Transaction fee amount:{" "}
+                <strong>
+                  {satoshiToBtc(stakingFeeSat)} {coinName}
+                </strong>
+              </p>
+            </div>
           ) : (
             <LoadingSmall text="Loading recommended fee rate..." />
           )}
-          {stakingFeeSat ? (
-            <p>
-              Transaction fee amount:{" "}
-              <strong>
-                {satoshiToBtc(stakingFeeSat)} {coinName}
-              </strong>
-            </p>
-          ) : (
-            <LoadingSmall text="Loading transaction fee amount..." />
-          )}
         </div>
         <button
           className="btn btn-sm btn-link no-underline"

src/app/components/Staking/Staking.tsx

@@ -590,6 +590,7 @@ export const Staking: React.FC<StakingProps> = ({
           stakingAmountSat,
           stakingTimeBlocksWithFixed,
           !!finalityProvider,
+          stakingFeeSat,
         );
 
       const previewReady =

src/utils/isStakingSignReady.ts

@@ -9,6 +9,7 @@ export const isStakingSignReady = (
   amount: number,
   time: number,
   fpSelected: boolean,
+  stakingFeeSat: number,
 ): { isReady: boolean; reason: string } => {
   if (!fpSelected)
     return {
@@ -39,6 +40,13 @@ export const isStakingSignReady = (
       isReady: false,
       reason: "Please enter a valid staking period",
     };
+  } else if (stakingFeeSat === 0) {
+    // This is a temporary solution when the fee is not calculated or throw an error
+    // the staking fee is set to 0 by stakingFeeSat from staking.tsx
+    return {
+      isReady: false,
+      reason: "Not enough funds to cover fees for staking",
+    };
   }
   return {
     isReady: true,

tests/utils/isStakingSignReady.test.ts

@@ -2,7 +2,7 @@ import { isStakingSignReady } from "@/utils/isStakingSignReady";
 
 describe("utils/isStakingSignReady", () => {
   it("should return false with reason if fpSelected is false", () => {
-    const result = isStakingSignReady(1, 2, 3, 4, 5, 6, false);
+    const result = isStakingSignReady(1, 2, 3, 4, 5, 6, false, 1);
     expect(result.isReady).toBe(false);
     expect(result.reason).toBe("Please select a finality provider");
   });
@@ -44,6 +44,7 @@ describe("utils/isStakingSignReady", () => {
         input.amount,
         6,
         true,
+        1,
       );
       expect(result.isReady).toBe(false);
       expect(result.reason).toBe("Please enter a valid stake amount");
@@ -87,14 +88,21 @@ describe("utils/isStakingSignReady", () => {
         5,
         input.time,
         true,
+        1,
       );
       expect(result.isReady).toBe(false);
       expect(result.reason).toBe("Please enter a valid staking period");
     });
   });
 
+  it("should return false with reason if sufficientBalance is false", () => {
+    const result = isStakingSignReady(1, 10, 20, 30, 5, 25, true, 0);
+    expect(result.isReady).toBe(false);
+    expect(result.reason).toBe("Not enough funds to cover fees for staking");
+  });
+
   it("should return true with empty reason if amount and time are ready", () => {
-    const result = isStakingSignReady(1, 10, 20, 30, 5, 25, true);
+    const result = isStakingSignReady(1, 10, 20, 30, 5, 25, true, 1);
     expect(result.isReady).toBe(true);
     expect(result.reason).toBe("");
   });