From 3f2f881f98c8ab024ef39a495d4112463c54f2fd Mon Sep 17 00:00:00 2001
From: wjrjerome <wjrjerome@babylonchain.io>
Date: Mon, 13 Jan 2025 19:38:42 +1100
Subject: [PATCH 1/2] fix: should not show staking form if not enabled

---
 src/app/state/StakingState.tsx               | 2 +-
 src/components/staking/StakingForm/index.tsx | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/app/state/StakingState.tsx b/src/app/state/StakingState.tsx
index 0123d373..f02d2ebb 100644
--- a/src/app/state/StakingState.tsx
+++ b/src/app/state/StakingState.tsx
@@ -142,7 +142,7 @@ export function StakingState({ children }: PropsWithChildren) {
     isNetworkFeeError ||
     !isApiNormal ||
     isGeoBlocked ||
-    !networkInfo?.stakingStatus;
+    !networkInfo?.stakingStatus.isStakingOpen;
   const loading = isStateLoading || isCheckLoading || isFeeLoading;
   const errorMessage = apiMessage;
   const latestParam = networkInfo?.params.bbnStakingParams?.latestParam;
diff --git a/src/components/staking/StakingForm/index.tsx b/src/components/staking/StakingForm/index.tsx
index fef4b3be..11365126 100644
--- a/src/components/staking/StakingForm/index.tsx
+++ b/src/components/staking/StakingForm/index.tsx
@@ -4,9 +4,11 @@ import { useState } from "react";
 import { StatusView } from "@/app/components/Staking/FinalityProviders/FinalityProviderTableStatusView";
 import apiNotAvailable from "@/app/components/Staking/Form/States/api-not-available.svg";
 import { Message } from "@/app/components/Staking/Form/States/Message";
+import { StakingNotAvailable } from "@/app/components/Staking/Form/States/StakingNotAvailable";
 import walletIcon from "@/app/components/Staking/Form/States/wallet-icon.svg";
 import { WalletNotConnected } from "@/app/components/Staking/Form/States/WalletNotConnected";
 import { useHealthCheck } from "@/app/hooks/useHealthCheck";
+import { useAppState } from "@/app/state";
 import { AuthGuard } from "@/components/common/AuthGuard";
 
 import { AmountField } from "./components/AmountField";
@@ -43,6 +45,7 @@ export function DelegationForm({
 }: DelegationFormProps) {
   const [isCustomFee, setIsCustomFee] = useState(false);
   const { isGeoBlocked } = useHealthCheck();
+  const { networkInfo } = useAppState();
 
   if (loading) {
     return (
@@ -63,6 +66,8 @@ export function DelegationForm({
           message={error ?? ""}
         />
       );
+    } else if (!networkInfo?.stakingStatus.isStakingOpen) {
+      return <StakingNotAvailable />;
     }
 
     return (

From 97b224f92995f85830517bba8980818cca38d210 Mon Sep 17 00:00:00 2001
From: David Totraev <totraev@gmail.com>
Date: Mon, 13 Jan 2025 14:28:48 +0500
Subject: [PATCH 2/2] fix: export more disabled states for staking form

---
 src/app/components/Staking/StakingForm.tsx   | 17 ++++++--
 src/app/state/StakingState.tsx               | 17 +++++---
 src/components/staking/StakingForm/index.tsx | 46 ++++++++++++--------
 3 files changed, 51 insertions(+), 29 deletions(-)

diff --git a/src/app/components/Staking/StakingForm.tsx b/src/app/components/Staking/StakingForm.tsx
index 951383a5..92d449db 100644
--- a/src/app/components/Staking/StakingForm.tsx
+++ b/src/app/components/Staking/StakingForm.tsx
@@ -12,8 +12,15 @@ import { FinalityProviders } from "./FinalityProviders/FinalityProviders";
 const { networkName } = getNetworkConfigBTC();
 
 export function StakingForm() {
-  const { loading, validationSchema, stakingInfo, hasError, errorMessage } =
-    useStakingState();
+  const {
+    loading,
+    validationSchema,
+    stakingInfo,
+    hasError,
+    blocked,
+    available,
+    errorMessage,
+  } = useStakingState();
   const { displayPreview } = useStakingService();
 
   return (
@@ -32,9 +39,11 @@ export function StakingForm() {
           <div className="flex lg:w-2/5 xl:w-1/3 p-6 rounded border bg-secondary-contrast border-primary-light/20">
             <DelegationForm
               loading={loading}
-              disabled={hasError}
-              stakingInfo={stakingInfo}
+              available={available}
+              blocked={blocked}
+              hasError={hasError}
               error={errorMessage}
+              stakingInfo={stakingInfo}
             />
           </div>
         </div>
diff --git a/src/app/state/StakingState.tsx b/src/app/state/StakingState.tsx
index f02d2ebb..71e4a00a 100644
--- a/src/app/state/StakingState.tsx
+++ b/src/app/state/StakingState.tsx
@@ -44,6 +44,8 @@ export type StakingStep =
 
 export interface StakingState {
   hasError: boolean;
+  blocked: boolean;
+  available: boolean;
   loading: boolean;
   processing: boolean;
   errorMessage?: string;
@@ -73,6 +75,8 @@ export interface StakingState {
 const { StateProvider, useState: useStakingState } =
   createStateUtils<StakingState>({
     hasError: false,
+    blocked: false,
+    available: false,
     loading: false,
     processing: false,
     errorMessage: "",
@@ -137,13 +141,10 @@ export function StakingState({ children }: PropsWithChildren) {
 
   const { publicKeyNoCoord } = useBTCWallet();
 
-  const hasError =
-    isStateError ||
-    isNetworkFeeError ||
-    !isApiNormal ||
-    isGeoBlocked ||
-    !networkInfo?.stakingStatus.isStakingOpen;
   const loading = isStateLoading || isCheckLoading || isFeeLoading;
+  const hasError = isStateError || isNetworkFeeError || !isApiNormal;
+  const blocked = isGeoBlocked;
+  const available = Boolean(networkInfo?.stakingStatus.isStakingOpen);
   const errorMessage = apiMessage;
   const latestParam = networkInfo?.params.bbnStakingParams?.latestParam;
 
@@ -299,6 +300,8 @@ export function StakingState({ children }: PropsWithChildren) {
   const context = useMemo(
     () => ({
       hasError,
+      blocked,
+      available,
       loading,
       processing,
       errorMessage,
@@ -315,6 +318,8 @@ export function StakingState({ children }: PropsWithChildren) {
     }),
     [
       hasError,
+      blocked,
+      available,
       loading,
       processing,
       errorMessage,
diff --git a/src/components/staking/StakingForm/index.tsx b/src/components/staking/StakingForm/index.tsx
index 11365126..06bf4292 100644
--- a/src/components/staking/StakingForm/index.tsx
+++ b/src/components/staking/StakingForm/index.tsx
@@ -4,11 +4,9 @@ import { useState } from "react";
 import { StatusView } from "@/app/components/Staking/FinalityProviders/FinalityProviderTableStatusView";
 import apiNotAvailable from "@/app/components/Staking/Form/States/api-not-available.svg";
 import { Message } from "@/app/components/Staking/Form/States/Message";
-import { StakingNotAvailable } from "@/app/components/Staking/Form/States/StakingNotAvailable";
+import stakingNotStartedIcon from "@/app/components/Staking/Form/States/staking-not-started.svg";
 import walletIcon from "@/app/components/Staking/Form/States/wallet-icon.svg";
 import { WalletNotConnected } from "@/app/components/Staking/Form/States/WalletNotConnected";
-import { useHealthCheck } from "@/app/hooks/useHealthCheck";
-import { useAppState } from "@/app/state";
 import { AuthGuard } from "@/components/common/AuthGuard";
 
 import { AmountField } from "./components/AmountField";
@@ -23,7 +21,9 @@ import { TermField } from "./components/TermField";
 
 interface DelegationFormProps {
   loading?: boolean;
-  disabled?: boolean;
+  blocked?: boolean;
+  available?: boolean;
+  hasError?: boolean;
   error?: string;
   stakingInfo?: {
     minFeeRate: number;
@@ -39,13 +39,13 @@ interface DelegationFormProps {
 
 export function DelegationForm({
   loading,
-  disabled,
+  blocked,
+  available,
+  hasError,
   error,
   stakingInfo,
 }: DelegationFormProps) {
   const [isCustomFee, setIsCustomFee] = useState(false);
-  const { isGeoBlocked } = useHealthCheck();
-  const { networkInfo } = useAppState();
 
   if (loading) {
     return (
@@ -57,19 +57,27 @@ export function DelegationForm({
     );
   }
 
-  if (disabled) {
-    if (isGeoBlocked) {
-      return (
-        <Message
-          icon={walletIcon}
-          title="Unavailable in Your Region"
-          message={error ?? ""}
-        />
-      );
-    } else if (!networkInfo?.stakingStatus.isStakingOpen) {
-      return <StakingNotAvailable />;
-    }
+  if (blocked) {
+    return (
+      <Message
+        icon={walletIcon}
+        title="Unavailable in Your Region"
+        message={error ?? ""}
+      />
+    );
+  }
+
+  if (!available) {
+    return (
+      <Message
+        title="Staking Temporarily Unavailable"
+        message="Staking is not enabled at this time. Please check back later."
+        icon={stakingNotStartedIcon}
+      />
+    );
+  }
 
+  if (hasError) {
     return (
       <Message
         icon={apiNotAvailable}