From c4538f1c0b57d3fb1646670e372268cfc3c91104 Mon Sep 17 00:00:00 2001
From: wjrjerome <wjrjerome@babylonchain.io>
Date: Mon, 12 Aug 2024 21:07:32 +1000
Subject: [PATCH] fix: issue with fee UI infinite react rendering loop

---
 .github/workflows/ci.yml                      |  4 ++--
 .github/workflows/publish.yaml                |  8 +++----
 .../components/Staking/Form/StakingFee.tsx    | 24 +++++++++----------
 src/app/components/Staking/Staking.tsx        |  1 +
 src/utils/isStakingSignReady.ts               |  8 +++++++
 tests/utils/isStakingSignReady.test.ts        | 12 ++++++++--
 6 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 7083d434..b3976930 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -3,11 +3,11 @@ name: ci
 on:
   pull_request:
     branches:
-    - '**'
+      - "**"
 
 jobs:
   lint_test:
     uses: babylonlabs-io/.github/.github/workflows/reusable_node_lint_test.yml@v0.3.0
     with:
       run-build: true
-      run-unit-tests: true
\ No newline at end of file
+      run-unit-tests: true
diff --git a/.github/workflows/publish.yaml b/.github/workflows/publish.yaml
index 96ed64c2..2c9f4030 100644
--- a/.github/workflows/publish.yaml
+++ b/.github/workflows/publish.yaml
@@ -3,10 +3,10 @@ name: docker_publish
 on:
   push:
     branches:
-    - 'main'
-    - 'dev'
+      - "main"
+      - "dev"
     tags:
-    - '*'
+      - "*"
 
 jobs:
   lint_test:
@@ -14,7 +14,7 @@ jobs:
     with:
       run-build: true
       run-unit-tests: true
-  
+
   docker_build:
     needs: [lint_test]
     runs-on: ubuntu-22.04
diff --git a/src/app/components/Staking/Form/StakingFee.tsx b/src/app/components/Staking/Form/StakingFee.tsx
index d2da2131..b43d0720 100644
--- a/src/app/components/Staking/Form/StakingFee.tsx
+++ b/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"
diff --git a/src/app/components/Staking/Staking.tsx b/src/app/components/Staking/Staking.tsx
index fbab9a12..378a6535 100644
--- a/src/app/components/Staking/Staking.tsx
+++ b/src/app/components/Staking/Staking.tsx
@@ -581,6 +581,7 @@ export const Staking: React.FC<StakingProps> = ({
           stakingAmountSat,
           stakingTimeBlocksWithFixed,
           !!finalityProvider,
+          stakingFeeSat,
         );
 
       const previewReady =
diff --git a/src/utils/isStakingSignReady.ts b/src/utils/isStakingSignReady.ts
index 71846f57..09897bf8 100644
--- a/src/utils/isStakingSignReady.ts
+++ b/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,
diff --git a/tests/utils/isStakingSignReady.test.ts b/tests/utils/isStakingSignReady.test.ts
index 1dc9cc8e..7dc306cf 100644
--- a/tests/utils/isStakingSignReady.test.ts
+++ b/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("");
   });