fix: minor issues

src/app/api/getDelegationsV2.ts

@@ -54,22 +54,27 @@ interface DelegationV2API {
 
 export const getDelegationV2 = async (
   stakingTxHashHex: string,
-): Promise<DelegationV2> => {
+): Promise<DelegationV2 | null> => {
   if (!stakingTxHashHex) {
     throw new Error("No staking tx hash provided");
   }
-  const params = {
-    staking_tx_hash_hex: stakingTxHashHex,
-  };
 
-  const { data: delegationAPIResponse } = await apiWrapper(
-    "GET",
-    "/v2/delegation",
-    "Error getting delegation v2",
-    { query: params },
-  );
+  try {
+    const params = {
+      staking_tx_hash_hex: stakingTxHashHex,
+    };
 
-  return apiToDelegationV2(delegationAPIResponse);
+    const { data: delegationAPIResponse } = await apiWrapper(
+      "GET",
+      "/v2/delegation",
+      "Error getting delegation v2",
+      { query: params },
+    );
+
+    return apiToDelegationV2(delegationAPIResponse.data);
+  } catch {
+    return null;
+  }
 };
 
 export const getDelegationsV2 = async (

src/app/components/Staking/FinalityProviders/FinalityProviderTableStatusView.tsx

@@ -1,15 +1,22 @@
 import { Heading, Text } from "@babylonlabs-io/bbn-core-ui";
+import { twMerge } from "tailwind-merge";
+
+interface StatusViewProps {
+  icon: React.ReactNode | string;
+  title: string;
+  description?: React.ReactNode;
+  className?: string;
+}
 
 export const StatusView = ({
   icon,
   title,
   description,
-}: {
-  icon: React.ReactNode | string;
-  title: string;
-  description?: React.ReactNode;
-}) => (
-  <div className="flex items-center justify-center h-[21rem]">
+  className,
+}: StatusViewProps) => (
+  <div
+    className={twMerge("flex items-center justify-center h-[21rem]", className)}
+  >
     <div className="flex flex-col items-center gap-4">
       <div className="bg-primary-contrast relative w-[5.5rem] h-[5.5rem]">
         <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">

src/app/hooks/services/useStakingService.ts

@@ -80,11 +80,11 @@ export function useStakingService() {
 
         const delegation = await retry(
           () => getDelegationV2(stakingTxHashHex),
-          (delegation) => delegation.state === DelegationState.VERIFIED,
+          (delegation) => delegation?.state === DelegationState.VERIFIED,
           5 * ONE_SECOND,
         );
 
-        setVerifiedDelegation(delegation);
+        setVerifiedDelegation(delegation as DelegationV2);
         goToStep("verified");
         setProcessing(false);
       } catch (error: any) {

src/app/state/StakingState.tsx

@@ -34,6 +34,7 @@ export type StakingStep =
   | "eoi-staking-slashing"
   | "eoi-unbonding-slashing"
   | "eoi-proof-of-possession"
+  | "eoi-sign-bbn"
   | "eoi-send-bbn"
   | "verifying"
   | "verified"
@@ -237,7 +238,7 @@ export function StakingState({ children }: PropsWithChildren) {
               stakingInfo?.maxFeeRate ?? 0,
               "Selected fee rate is higher than the hour fee",
             )
-            .moreThan(
+            .min(
               stakingInfo?.defaultFeeRate ?? 0,
               "Fees are low, inclusion is not guaranteed",
             ),

src/components/staking/StakingForm/components/FeeSection.tsx

@@ -0,0 +1,14 @@
+import { useFormState } from "@babylonlabs-io/bbn-core-ui";
+import { PropsWithChildren } from "react";
+
+export const FeeSection = ({ children }: PropsWithChildren) => {
+  const { errors } = useFormState({
+    name: ["finalityProvider", "term", "amount"],
+  });
+
+  if (errors.finalityProvider || errors.term || errors.amount) {
+    return null;
+  }
+
+  return <>{children}</>;
+};

src/components/staking/StakingForm/components/Overlay.tsx

@@ -10,7 +10,7 @@ export function FormOverlay({
   className,
   children,
 }: PropsWithChildren<OverlayProps>) {
-  const { isValid } = useFormState({
+  const { errors } = useFormState({
     name: "finalityProvider",
   });
 
@@ -19,7 +19,9 @@ export function FormOverlay({
       <div
         className={twJoin(
           `absolute inset-0 bg-secondary-contrast z-10 transition-opacity duration-300`,
-          isValid ? "opacity-0 pointer-events-none" : "opacity-75",
+          !errors.finalityProvider
+            ? "opacity-0 pointer-events-none"
+            : "opacity-75",
         )}
       />
       {children}

src/components/staking/StakingForm/index.tsx

@@ -1,7 +1,7 @@
-import { Heading, Text, useFormState } from "@babylonlabs-io/bbn-core-ui";
+import { Heading, Loader, Text } from "@babylonlabs-io/bbn-core-ui";
 import { useState } from "react";
 
-import { LoadingView } from "@/app/components/Loading/Loading";
+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 { WalletNotConnected } from "@/app/components/Staking/Form/States/WalletNotConnected";
@@ -11,6 +11,7 @@ import { AmountField } from "./components/AmountField";
 import { FeeAmountField } from "./components/FeeAmountField";
 import { FeeInfo } from "./components/FeeInfo";
 import { FeeRateField } from "./components/FeeRateField";
+import { FeeSection } from "./components/FeeSection";
 import { InfoAlert } from "./components/InfoAlert";
 import { FormOverlay } from "./components/Overlay";
 import { SubmitButton } from "./components/SubmitButton";
@@ -38,12 +39,11 @@ export function DelegationForm({
   stakingInfo,
 }: DelegationFormProps) {
   const [isCustomFee, setIsCustomFee] = useState(false);
-  const { isValid } = useFormState({
-    name: ["finalityProvider", "term", "amount"],
-  });
 
   if (loading) {
-    return <LoadingView />;
+    return (
+      <StatusView className="flex-1" icon={<Loader />} title="Please wait..." />
+    );
   }
 
   if (disabled) {
@@ -79,21 +79,19 @@ export function DelegationForm({
               max={stakingInfo?.maxStakingAmountSat}
             />
 
-            {isValid && (
-              <>
-                <FeeInfo custom={isCustomFee} />
+            <FeeSection>
+              <FeeInfo custom={isCustomFee} />
 
-                <FeeRateField
-                  expanded={isCustomFee}
-                  defaultRate={stakingInfo?.defaultFeeRate}
-                  min={stakingInfo?.minFeeRate}
-                  max={stakingInfo?.maxFeeRate}
-                  onExpand={() => void setIsCustomFee(true)}
-                />
+              <FeeRateField
+                expanded={isCustomFee}
+                defaultRate={stakingInfo?.defaultFeeRate}
+                min={stakingInfo?.minFeeRate}
+                max={stakingInfo?.maxFeeRate}
+                onExpand={() => void setIsCustomFee(true)}
+              />
 
-                <FeeAmountField />
-              </>
-            )}
+              <FeeAmountField />
+            </FeeSection>
           </FormOverlay>
 
           <SubmitButton />

src/utils/index.ts

@@ -7,14 +7,15 @@ export function wait(ms: number): Promise<undefined> {
 export async function retry<R>(
   fn: () => Promise<R>,
   finished: (value: R) => boolean,
-  every: number | ((index: number, value: R) => number),
+  delay: number | ((index: number, value: R) => number),
+  attempts = Infinity,
 ) {
-  const delay = typeof every === "number" ? () => every : every;
-
+  const getDelay = typeof delay === "number" ? () => delay : delay;
   let value = await fn();
   let index = 1;
-  while (!finished(value)) {
-    await wait(delay(index, value));
+
+  while (!finished(value) && index <= attempts) {
+    await wait(getDelay(index, value));
     value = await fn();
     index++;
   }