From 4a30f406d24f667b2a3c052cbddcc85bcba6a1cb Mon Sep 17 00:00:00 2001
From: Jeremy <168515712+jeremy-babylonlabs@users.noreply.github.com>
Date: Thu, 12 Dec 2024 17:51:39 +0800
Subject: [PATCH] disable form when no fp selected (#495)

---
 src/app/components/Staking/Form/StakingAmount.tsx |  8 ++++++--
 src/app/components/Staking/Form/StakingTime.tsx   |  4 ++++
 src/app/components/Staking/Staking.tsx            | 13 +++++++++++--
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/app/components/Staking/Form/StakingAmount.tsx b/src/app/components/Staking/Form/StakingAmount.tsx
index 97b56a05..cf180554 100644
--- a/src/app/components/Staking/Form/StakingAmount.tsx
+++ b/src/app/components/Staking/Form/StakingAmount.tsx
@@ -13,6 +13,7 @@ interface StakingAmountProps {
   btcWalletBalanceSat?: number;
   onStakingAmountSatChange: (inputAmountSat: number) => void;
   reset: boolean;
+  disabled?: boolean;
 }
 
 export const StakingAmount: React.FC<StakingAmountProps> = ({
@@ -21,6 +22,7 @@ export const StakingAmount: React.FC<StakingAmountProps> = ({
   btcWalletBalanceSat,
   onStakingAmountSatChange,
   reset,
+  disabled = false,
 }) => {
   const [value, setValue] = useState("");
   const [error, setError] = useState("");
@@ -127,13 +129,15 @@ export const StakingAmount: React.FC<StakingAmountProps> = ({
       <input
         type="string"
         className={twJoin(
-          "no-focus input input-bordered w-full",
-          error ? "input-error" : "",
+          `no-focus input input-bordered w-full`,
+          error && "input-error",
+          disabled && "opacity-50 cursor-not-allowed",
         )}
         value={value}
         onChange={handleChange}
         onBlur={handleBlur}
         placeholder={coinName}
+        disabled={disabled}
       />
 
       <div className="text-left my-2 min-h-5">
diff --git a/src/app/components/Staking/Form/StakingTime.tsx b/src/app/components/Staking/Form/StakingTime.tsx
index 42eb1b45..00bd39d8 100644
--- a/src/app/components/Staking/Form/StakingTime.tsx
+++ b/src/app/components/Staking/Form/StakingTime.tsx
@@ -9,6 +9,7 @@ interface StakingTimeProps {
   unbondingTimeBlocks: number;
   onStakingTimeBlocksChange: (inputTimeBlocks: number) => void;
   reset: boolean;
+  disabled?: boolean;
 }
 
 export const StakingTime: React.FC<StakingTimeProps> = ({
@@ -16,6 +17,7 @@ export const StakingTime: React.FC<StakingTimeProps> = ({
   maxStakingTimeBlocks,
   onStakingTimeBlocksChange,
   reset,
+  disabled = false,
 }) => {
   const [value, setValue] = useState("");
   const [error, setError] = useState("");
@@ -112,11 +114,13 @@ export const StakingTime: React.FC<StakingTimeProps> = ({
         className={twJoin(
           `no-focus input input-bordered w-full`,
           error && "input-error",
+          disabled && "opacity-50 cursor-not-allowed",
         )}
         value={value}
         onChange={handleChange}
         onBlur={handleBlur}
         placeholder="Blocks"
+        disabled={disabled}
       />
       <div className="text-left my-2 min-h-5">
         <p className="text-sm text-error-main">{error}</p>
diff --git a/src/app/components/Staking/Staking.tsx b/src/app/components/Staking/Staking.tsx
index 499e2343..c2cd905c 100644
--- a/src/app/components/Staking/Staking.tsx
+++ b/src/app/components/Staking/Staking.tsx
@@ -432,7 +432,7 @@ export const Staking = () => {
 
       return (
         <div className="flex flex-col gap-4">
-          <div className="flex flex-col gap-4">
+          <div className="relative flex flex-col gap-4">
             <Heading variant="h5" className="text-primary-dark">
               Step 2
             </Heading>
@@ -464,13 +464,21 @@ export const Staking = () => {
               </div>
             </div>
             <div className="flex flex-1 flex-col">
-              <div className="flex flex-1 flex-col">
+              <div className="relative flex flex-1 flex-col">
+                <div
+                  className={`absolute inset-0 bg-secondary-contrast z-10 transition-opacity duration-300 ${
+                    finalityProvider
+                      ? "opacity-0 pointer-events-none"
+                      : "opacity-75"
+                  }`}
+                />
                 <StakingTime
                   minStakingTimeBlocks={minStakingTimeBlocks}
                   maxStakingTimeBlocks={maxStakingTimeBlocks}
                   unbondingTimeBlocks={unbondingTime}
                   onStakingTimeBlocksChange={handleStakingTimeBlocksChange}
                   reset={resetFormInputs}
+                  disabled={!finalityProvider}
                 />
                 <StakingAmount
                   minStakingAmountSat={minStakingAmountSat}
@@ -478,6 +486,7 @@ export const Staking = () => {
                   btcWalletBalanceSat={btcWalletBalanceSat}
                   onStakingAmountSatChange={handleStakingAmountSatChange}
                   reset={resetFormInputs}
+                  disabled={!finalityProvider}
                 />
                 {signReady && (
                   <StakingFee