fix: should not show staking form if not enabled (#627)

* fix: should not show staking form if not enabled --------- Co-authored-by: David Totraev <[email protected]>
babylonlabs-io · Jan 13, 2025 · b9ddcb4 · b9ddcb4
1 parent 60f3f9f
commit b9ddcb4
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 24 deletions.
diff --git 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
@@ -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;
   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
@@ -4,9 +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 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 { AuthGuard } from "@/components/common/AuthGuard";
 
 import { AmountField } from "./components/AmountField";
@@ -21,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;
@@ -37,12 +39,13 @@ interface DelegationFormProps {
 
 export function DelegationForm({
   loading,
-  disabled,
+  blocked,
+  available,
+  hasError,
   error,
   stakingInfo,
 }: DelegationFormProps) {
   const [isCustomFee, setIsCustomFee] = useState(false);
-  const { isGeoBlocked } = useHealthCheck();
 
   if (loading) {
     return (
@@ -54,17 +57,27 @@ export function DelegationForm({
     );
   }
 
-  if (disabled) {
-    if (isGeoBlocked) {
-      return (
-        <Message
-          icon={walletIcon}
-          title="Unavailable in Your Region"
-          message={error ?? ""}
-        />
-      );
-    }
+  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}