fix: issue with fee UI infinite react rendering loop

.github/workflows/ci.yml

@@ -3,11 +3,11 @@ name: ci
 on:
   pull_request:
     branches:
-    - '**'
+      - "**"
 
 jobs:
   lint_test:
     uses: babylonlabs-io/.github/.github/workflows/[email protected]
     with:
       run-build: true
-      run-unit-tests: true
+      run-unit-tests: true

.github/workflows/publish.yaml

@@ -3,18 +3,18 @@ name: docker_publish
 on:
   push:
     branches:
-    - 'main'
-    - 'dev'
+      - "main"
+      - "dev"
     tags:
-    - '*'
+      - "*"
 
 jobs:
   lint_test:
     uses: babylonlabs-io/.github/.github/workflows/[email protected]
     with:
       run-build: true
       run-unit-tests: true
-  
+
   docker_build:
     needs: [lint_test]
     runs-on: ubuntu-22.04

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

@@ -581,6 +581,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("");
   });