From 3b571bbc30b0b1385b9e62e04073092ce8c683a2 Mon Sep 17 00:00:00 2001
From: Crypto Minion <154598612+jrwbabylonlab@users.noreply.github.com>
Date: Tue, 13 Aug 2024 11:49:43 +1000
Subject: [PATCH] fix: issue with fee UI react rendering loop (#66)

* fix: issue with fee UI infinite react rendering loop
---
 package-lock.json                             |  4 ++--
 package.json                                  |  2 +-
 .../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, 33 insertions(+), 18 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e5027773..e3228569 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "simple-staking",
-  "version": "0.2.31",
+  "version": "0.2.32",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "simple-staking",
-      "version": "0.2.31",
+      "version": "0.2.32",
       "dependencies": {
         "@bitcoinerlab/secp256k1": "^1.1.1",
         "@keystonehq/animated-qr": "^0.8.6",
diff --git a/package.json b/package.json
index b9087f41..1657ae19 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simple-staking",
-  "version": "0.2.31",
+  "version": "0.2.32",
   "private": true,
   "scripts": {
     "dev": "next dev",
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 f0d1ce1f..85cbcc0b 100644
--- a/src/app/components/Staking/Staking.tsx
+++ b/src/app/components/Staking/Staking.tsx
@@ -590,6 +590,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("");
   });