disable form when no fp selected (#495)

babylonlabs-io · Dec 12, 2024 · 4a30f40 · 4a30f40
1 parent 9911b8f
commit 4a30f40
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git 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
@@ -9,13 +9,15 @@ interface StakingTimeProps {
   unbondingTimeBlocks: number;
   onStakingTimeBlocksChange: (inputTimeBlocks: number) => void;
   reset: boolean;
+  disabled?: boolean;
 }
 
 export const StakingTime: React.FC<StakingTimeProps> = ({
   minStakingTimeBlocks,
   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
@@ -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,20 +464,29 @@ 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}
                   maxStakingAmountSat={maxStakingAmountSat}
                   btcWalletBalanceSat={btcWalletBalanceSat}
                   onStakingAmountSatChange={handleStakingAmountSatChange}
                   reset={resetFormInputs}
+                  disabled={!finalityProvider}
                 />
                 {signReady && (
                   <StakingFee