From c93fa11ce076b4a87408cc27f57df7056821f7f9 Mon Sep 17 00:00:00 2001
From: jeremy-babylonchain <jeremy.tsang@babylonchain.io>
Date: Fri, 16 Aug 2024 02:17:54 +0700
Subject: [PATCH] update text explaination and improve input reset logic

---
 package-lock.json                                  |  4 ++--
 package.json                                       |  2 +-
 .../FinalityProviders/FinalityProviders.tsx        |  2 +-
 src/app/components/Staking/Form/StakingAmount.tsx  |  5 +++--
 src/app/components/Staking/Form/StakingFee.tsx     |  2 +-
 src/app/components/Staking/Form/StakingTime.tsx    |  2 +-
 src/app/components/Staking/Staking.tsx             | 14 +++++++-------
 7 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c7bb927a..2fe56d31 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "simple-staking",
-  "version": "0.2.33",
+  "version": "0.2.34",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "simple-staking",
-      "version": "0.2.33",
+      "version": "0.2.34",
       "dependencies": {
         "@bitcoinerlab/secp256k1": "^1.1.1",
         "@keystonehq/animated-qr": "^0.8.6",
diff --git a/package.json b/package.json
index a3564de8..7d9e8ac2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simple-staking",
-  "version": "0.2.33",
+  "version": "0.2.34",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx
index 95e3cd45..68d16d41 100644
--- a/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx
+++ b/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx
@@ -31,7 +31,7 @@ export const FinalityProviders: React.FC<FinalityProvidersProps> = ({
 
   return (
     <>
-      <p>Select a finality provider.</p>
+      <p>Step-1: Select a finaltiy provider</p>
       <div className="hidden gap-2 px-4 lg:grid lg:grid-cols-stakingFinalityProvidersDesktop">
         <p>Finality Provider</p>
         <p>BTC PK</p>
diff --git a/src/app/components/Staking/Form/StakingAmount.tsx b/src/app/components/Staking/Form/StakingAmount.tsx
index 2ce5d531..66b3c68f 100644
--- a/src/app/components/Staking/Form/StakingAmount.tsx
+++ b/src/app/components/Staking/Form/StakingAmount.tsx
@@ -11,7 +11,7 @@ interface StakingAmountProps {
   maxStakingAmountSat: number;
   btcWalletBalanceSat?: number;
   onStakingAmountSatChange: (inputAmountSat: number) => void;
-  reset: boolean;
+  reset: number;
 }
 
 export const StakingAmount: React.FC<StakingAmountProps> = ({
@@ -37,7 +37,8 @@ export const StakingAmount: React.FC<StakingAmountProps> = ({
     setValue("");
     setError("");
     setTouched(false);
-  }, [reset]);
+    onStakingAmountSatChange(0);
+  }, [reset, onStakingAmountSatChange]);
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
diff --git a/src/app/components/Staking/Form/StakingFee.tsx b/src/app/components/Staking/Form/StakingFee.tsx
index b43d0720..06f1aa19 100644
--- a/src/app/components/Staking/Form/StakingFee.tsx
+++ b/src/app/components/Staking/Form/StakingFee.tsx
@@ -11,7 +11,7 @@ interface StakingFeeProps {
   stakingFeeSat: number;
   selectedFeeRate: number;
   onSelectedFeeRateChange: (fee: number) => void;
-  reset: boolean;
+  reset: number;
   // optional as component shows loading state
   mempoolFeeRates?: Fees;
 }
diff --git a/src/app/components/Staking/Form/StakingTime.tsx b/src/app/components/Staking/Form/StakingTime.tsx
index 43f819de..07fa83d8 100644
--- a/src/app/components/Staking/Form/StakingTime.tsx
+++ b/src/app/components/Staking/Form/StakingTime.tsx
@@ -10,7 +10,7 @@ interface StakingTimeProps {
   maxStakingTimeBlocks: number;
   unbondingTimeBlocks: number;
   onStakingTimeBlocksChange: (inputTimeBlocks: number) => void;
-  reset: boolean;
+  reset: number;
 }
 
 export const StakingTime: React.FC<StakingTimeProps> = ({
diff --git a/src/app/components/Staking/Staking.tsx b/src/app/components/Staking/Staking.tsx
index 18230b71..e0d7365f 100644
--- a/src/app/components/Staking/Staking.tsx
+++ b/src/app/components/Staking/Staking.tsx
@@ -95,7 +95,7 @@ export const Staking: React.FC<StakingProps> = ({
   // Selected fee rate, comes from the user input
   const [selectedFeeRate, setSelectedFeeRate] = useState(0);
   const [previewModalOpen, setPreviewModalOpen] = useState(false);
-  const [resetFormInputs, setResetFormInputs] = useState(false);
+  const [resetCount, setResetCount] = useState(0);
   const [feedbackModal, setFeedbackModal] = useState<{
     type: "success" | "cancel" | null;
     isOpen: boolean;
@@ -234,8 +234,8 @@ export const Staking: React.FC<StakingProps> = ({
     setStakingAmountSat(0);
     setStakingTimeBlocks(0);
     setSelectedFeeRate(0);
+    setResetCount((prev) => prev + 1);
     setPreviewModalOpen(false);
-    setResetFormInputs(!resetFormInputs);
   };
 
   const { minFeeRate, defaultFeeRate } = getFeeRateFromMempool(mempoolFeeRates);
@@ -291,8 +291,8 @@ export const Staking: React.FC<StakingProps> = ({
           // in case of error, we need to partly reset the state
           setStakingAmountSat(0);
           setSelectedFeeRate(0);
+          setResetCount((prev) => prev + 1);
           setPreviewModalOpen(false);
-          setResetFormInputs(!resetFormInputs);
           // and refetch the UTXOs
           queryClient.invalidateQueries({ queryKey: [UTXO_KEY, address] });
         },
@@ -607,7 +607,7 @@ export const Staking: React.FC<StakingProps> = ({
 
       return (
         <>
-          <p>Set up staking terms</p>
+          <p>Step-2: Set up staking terms</p>
           <div className="flex flex-1 flex-col">
             <div className="flex flex-1 flex-col">
               <StakingTime
@@ -615,14 +615,14 @@ export const Staking: React.FC<StakingProps> = ({
                 maxStakingTimeBlocks={maxStakingTimeBlocks}
                 unbondingTimeBlocks={stakingParams.unbondingTime}
                 onStakingTimeBlocksChange={handleStakingTimeBlocksChange}
-                reset={resetFormInputs}
+                reset={resetCount}
               />
               <StakingAmount
                 minStakingAmountSat={minStakingAmountSat}
                 maxStakingAmountSat={maxStakingAmountSat}
                 btcWalletBalanceSat={btcWalletBalanceSat}
                 onStakingAmountSatChange={handleStakingAmountSatChange}
-                reset={resetFormInputs}
+                reset={resetCount}
               />
               {signReady && (
                 <StakingFee
@@ -630,7 +630,7 @@ export const Staking: React.FC<StakingProps> = ({
                   stakingFeeSat={stakingFeeSat}
                   selectedFeeRate={selectedFeeRate}
                   onSelectedFeeRateChange={setSelectedFeeRate}
-                  reset={resetFormInputs}
+                  reset={resetCount}
                 />
               )}
             </div>