From 0632a17021d86fb53d997524cbc5f18e20137b29 Mon Sep 17 00:00:00 2001
From: Govard Barkhatov <gbarkhatov@gmail.com>
Date: Mon, 12 Aug 2024 21:08:51 +0200
Subject: [PATCH 1/3] fix: Refetch UTXOs on unsuccessful staking (#64)

* no cancel

* proper noCancel pass

* partly reset
---
 .github/workflows/ci.yml                 |  4 ++--
 .github/workflows/publish.yaml           |  8 ++++----
 src/app/components/Modals/ErrorModal.tsx | 18 +++++++++++-------
 src/app/components/Staking/Staking.tsx   | 11 ++++++++++-
 src/app/context/Error/ErrorContext.tsx   | 18 +++++++++++++-----
 src/app/page.tsx                         | 11 +++++++++--
 src/app/types/errors.ts                  |  1 +
 7 files changed, 50 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/Modals/ErrorModal.tsx b/src/app/components/Modals/ErrorModal.tsx
index 54660034..20331e28 100644
--- a/src/app/components/Modals/ErrorModal.tsx
+++ b/src/app/components/Modals/ErrorModal.tsx
@@ -12,6 +12,7 @@ interface ErrorModalProps {
   errorMessage: string;
   errorState?: ErrorState;
   errorTime: Date;
+  noCancel?: boolean;
 }
 
 export const ErrorModal: React.FC<ErrorModalProps> = ({
@@ -20,7 +21,8 @@ export const ErrorModal: React.FC<ErrorModalProps> = ({
   onRetry,
   errorMessage,
   errorState,
-  errorTime,
+  noCancel,
+  // errorTime, // This prop is not used in the component
 }) => {
   const { error, retryErrorAction } = useError();
 
@@ -93,12 +95,14 @@ export const ErrorModal: React.FC<ErrorModalProps> = ({
           <p className="text-center">{getErrorMessage()}</p>
         </div>
         <div className="mt-4 flex justify-around gap-4">
-          <button
-            className="btn btn-outline flex-1 rounded-lg px-2"
-            onClick={() => onClose()}
-          >
-            Cancel
-          </button>
+          {!noCancel && ( // Only show the cancel button if noCancel is false or undefined
+            <button
+              className="btn btn-outline flex-1 rounded-lg px-2"
+              onClick={() => onClose()}
+            >
+              Cancel
+            </button>
+          )}
           {onRetry && (
             <button
               className="btn-primary btn flex-1 rounded-lg px-2 text-white"
diff --git a/src/app/components/Staking/Staking.tsx b/src/app/components/Staking/Staking.tsx
index fbab9a12..f0d1ce1f 100644
--- a/src/app/components/Staking/Staking.tsx
+++ b/src/app/components/Staking/Staking.tsx
@@ -286,7 +286,16 @@ export const Staking: React.FC<StakingProps> = ({
           errorState: ErrorState.STAKING,
           errorTime: new Date(),
         },
-        retryAction: handleSign,
+        noCancel: true,
+        retryAction: () => {
+          // in case of error, we need to partly reset the state
+          setStakingAmountSat(0);
+          setSelectedFeeRate(0);
+          setPreviewModalOpen(false);
+          setResetFormInputs(!resetFormInputs);
+          // and refetch the UTXOs
+          queryClient.invalidateQueries({ queryKey: [UTXO_KEY, address] });
+        },
       });
     }
   };
diff --git a/src/app/context/Error/ErrorContext.tsx b/src/app/context/Error/ErrorContext.tsx
index ce48f633..d0ae82b8 100644
--- a/src/app/context/Error/ErrorContext.tsx
+++ b/src/app/context/Error/ErrorContext.tsx
@@ -20,10 +20,12 @@ interface ErrorContextType {
   retryErrorAction?: () => void;
   showError: (showErrorParams: ShowErrorParams) => void;
   hideError: () => void;
+  noCancel?: boolean;
 }
 
 export const ErrorProvider: React.FC<ErrorProviderProps> = ({ children }) => {
   const [isErrorOpen, setIsErrorOpen] = useState(false);
+  const [isNoCancel, setIsNoCancel] = useState(false);
   const [error, setError] = useState<ErrorType>({
     message: "",
     errorTime: new Date(),
@@ -33,11 +35,15 @@ export const ErrorProvider: React.FC<ErrorProviderProps> = ({ children }) => {
     (() => void) | undefined
   >();
 
-  const showError = useCallback(({ error, retryAction }: ShowErrorParams) => {
-    setError(error);
-    setIsErrorOpen(true);
-    setRetryErrorAction(() => retryAction);
-  }, []);
+  const showError = useCallback(
+    ({ error, retryAction, noCancel }: ShowErrorParams) => {
+      setError(error);
+      setIsErrorOpen(true);
+      setIsNoCancel(noCancel ?? false);
+      setRetryErrorAction(() => retryAction);
+    },
+    [],
+  );
 
   const hideError = useCallback(() => {
     setIsErrorOpen(false);
@@ -48,6 +54,7 @@ export const ErrorProvider: React.FC<ErrorProviderProps> = ({ children }) => {
         errorState: undefined,
       });
       setRetryErrorAction(undefined);
+      setIsNoCancel(false);
     }, 300);
   }, []);
 
@@ -57,6 +64,7 @@ export const ErrorProvider: React.FC<ErrorProviderProps> = ({ children }) => {
     showError,
     hideError,
     retryErrorAction,
+    noCancel: isNoCancel,
   };
 
   return (
diff --git a/src/app/page.tsx b/src/app/page.tsx
index bcbe380b..af41aec3 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -51,8 +51,14 @@ const Home: React.FC<HomeProps> = () => {
   const [publicKeyNoCoord, setPublicKeyNoCoord] = useState("");
 
   const [address, setAddress] = useState("");
-  const { error, isErrorOpen, showError, hideError, retryErrorAction } =
-    useError();
+  const {
+    error,
+    isErrorOpen,
+    showError,
+    hideError,
+    retryErrorAction,
+    noCancel,
+  } = useError();
   const { isTermsOpen, closeTerms } = useTerms();
 
   const {
@@ -470,6 +476,7 @@ const Home: React.FC<HomeProps> = () => {
         errorTime={error.errorTime}
         onClose={hideError}
         onRetry={retryErrorAction}
+        noCancel={noCancel}
       />
       <TermsModal open={isTermsOpen} onClose={closeTerms} />
     </main>
diff --git a/src/app/types/errors.ts b/src/app/types/errors.ts
index e858a818..7080274e 100644
--- a/src/app/types/errors.ts
+++ b/src/app/types/errors.ts
@@ -22,4 +22,5 @@ export interface ErrorHandlerParam {
 export interface ShowErrorParams {
   error: ErrorType;
   retryAction?: () => void;
+  noCancel?: boolean;
 }

From 2232697f5b322bfabe1fc3b64dc941390bea0be5 Mon Sep 17 00:00:00 2001
From: Govard Barkhatov <gbarkhatov@gmail.com>
Date: Tue, 13 Aug 2024 03:39:18 +0200
Subject: [PATCH 2/3] mobile cards redesign (#60)

---
 src/app/components/Delegations/Delegation.tsx | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/app/components/Delegations/Delegation.tsx b/src/app/components/Delegations/Delegation.tsx
index b3ff0dd0..de3e4958 100644
--- a/src/app/components/Delegations/Delegation.tsx
+++ b/src/app/components/Delegations/Delegation.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { AiOutlineInfoCircle } from "react-icons/ai";
+import { FaBitcoin } from "react-icons/fa";
 import { IoIosWarning } from "react-icons/io";
 import { Tooltip } from "react-tooltip";
 
@@ -122,12 +123,17 @@ export const Delegation: React.FC<DelegationProps> = ({
           <p>overflow</p>
         </div>
       )}
-      <div className="grid grid-flow-col grid-cols-2 grid-rows-2 items-center gap-2 lg:grid-flow-row lg:grid-cols-5 lg:grid-rows-1">
-        <p>
-          {maxDecimals(satoshiToBtc(stakingValueSat), 8)} {coinName}
+      <div className="grid grid-flow-col grid-cols-2 grid-rows-3 items-center gap-2 lg:grid-flow-row lg:grid-cols-5 lg:grid-rows-1">
+        <div className="flex gap-1 items-center order-1">
+          <FaBitcoin className="text-primary" />
+          <p>
+            {maxDecimals(satoshiToBtc(stakingValueSat), 8)} {coinName}
+          </p>
+        </div>
+        <p className="order-3 lg:order-2">
+          {durationTillNow(startTimestamp, currentTime)}
         </p>
-        <p>{durationTillNow(startTimestamp, currentTime)}</p>
-        <div className="hidden justify-center lg:flex">
+        <div className="justify-center lg:flex order-2 lg:order-3">
           <a
             href={`${mempoolApiUrl}/tx/${stakingTxHash}`}
             target="_blank"
@@ -137,11 +143,13 @@ export const Delegation: React.FC<DelegationProps> = ({
             {trim(stakingTxHash)}
           </a>
         </div>
+        {/* Future data placeholder */}
+        <div className="order-5 lg:hidden" />
         {/*
         we need to center the text without the tooltip
         add its size 12px and gap 4px, 16/2 = 8px
         */}
-        <div className="relative flex justify-end lg:left-[8px] lg:justify-center">
+        <div className="relative flex justify-end lg:left-[8px] lg:justify-center order-4">
           <div className="flex items-center gap-1">
             <p>{renderState()}</p>
             <span
@@ -155,7 +163,7 @@ export const Delegation: React.FC<DelegationProps> = ({
             <Tooltip id={`tooltip-${stakingTxHash}`} className="tooltip-wrap" />
           </div>
         </div>
-        {generateActionButton()}
+        <div className="order-6">{generateActionButton()}</div>
       </div>
     </div>
   );

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 3/3] 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("");
   });