fix: show loading and unavailable states for operator balance and fee

The operator detail page rendered a confident "0 ETH" for Balance and
Annual Fee whenever the on-chain reads were pending or failing, because
useOperatorEarningsAndFees coalesced `data ?? 0n`.

- expose earningsStatus / feesStatus from the hook via combineQueryStatus
- treat fetchStatus "paused" as unavailable: a read that cannot reach the
  RPC parks at status "pending" and never resolves to an error, which
  would otherwise leave the UI on a skeleton indefinitely
- render a skeleton while pending and an explicit unavailable message
  instead of a zero amount
- gate Withdraw and Update Fee on query success rather than on the
  coalesced bigint, so a failed read no longer leaves Update Fee
  clickable into the fee wizard

# Conflicts:
#	src/app/routes/dashboard/operators/operator.tsx

Author: Chris-ssvlabs

src/app/routes/dashboard/operators/operator.tsx

@@ -19,15 +19,43 @@ import { IncreaseOperatorFeeStatusBadge } from "@/components/operator/increase-o
 import { OperatorValidatorsList } from "@/components/operator/operator-validators-list";
 import { OperatorStatusBadge } from "@/components/operator/operator-status-badge";
 import { useOperatorEarningsAndFees } from "@/hooks/operator/use-operator-earnings-and-fees";
+import { Skeleton } from "@/components/ui/skeleton";
+
+const AmountSkeleton: FC = () => (
+  <div className="flex flex-col gap-2">
+    <Skeleton className="h-7 w-32" />
+    <Skeleton className="h-4 w-16" />
+  </div>
+);
+
+const AmountUnavailable: FC = () => (
+  <div className="flex flex-col items-start gap-2">
+    <Text variant="body-2-medium" className="text-error-500">
+      Couldn't read this value from the network.
+    </Text>
+    <Text variant="body-3-medium" className="text-gray-500">
+      It will appear once the connection recovers.
+    </Text>
+  </div>
+);
 
 export const Operator: FC<ComponentPropsWithoutRef<"div">> = ({ ...props }) => {
   const params = useOperatorPageParams();
   const operatorId = BigInt(params.operatorId!);
   const operator = useOperator(operatorId!);
-  const { feeEth, yearlyFeeEth, yearlyFeeSSV, balanceEth, balanceSSV } =
-    useOperatorEarningsAndFees(operatorId);
+  const {
+    feeEth,
+    yearlyFeeEth,
+    yearlyFeeSSV,
+    balanceEth,
+    balanceSSV,
+    earningsStatus,
+    feesStatus,
+  } = useOperatorEarningsAndFees(operatorId);
 
-  const hasBalance = balanceEth > 0n || balanceSSV > 0n;
+  const hasBalance =
+    earningsStatus.isSuccess && (balanceEth > 0n || balanceSSV > 0n);
+  const canUpdateFee = feesStatus.isSuccess && feeEth.data !== 0n;
 
   if (!operator.data) return null;
 
@@ -101,13 +129,29 @@ export const Operator: FC<ComponentPropsWithoutRef<"div">> = ({ ...props }) => {
               <Text variant="headline4" className="text-gray-500">
                 Balance
               </Text>
-              <div className="flex flex-col gap-4">
-                <BalanceDisplay amount={balanceEth} token="ETH" />
-                {yearlyFeeSSV !== 0n && !operator.data.migrated && <BalanceDisplay amount={balanceSSV} token="SSV" />}
-              </div>
+              {earningsStatus.isUnavailable ? (
+                <AmountUnavailable />
+              ) : earningsStatus.isPending ? (
+                <AmountSkeleton />
+              ) : (
+                <div className="flex flex-col gap-4">
+                  <BalanceDisplay amount={balanceEth} token="ETH" />
+                  {yearlyFeeSSV !== 0n && !operator.data.migrated && (
+                    <BalanceDisplay amount={balanceSSV} token="SSV" />
+                  )}
+                </div>
+              )}
               <Tooltip
                 asChild
-                content={!hasBalance ? "No balance to withdraw" : undefined}
+                content={
+                  earningsStatus.isUnavailable
+                    ? "Balance unavailable"
+                    : earningsStatus.isPending
+                      ? "Loading balance"
+                      : !hasBalance
+                        ? "No balance to withdraw"
+                        : undefined
+                }
               >
                 <Button
                   as={Link}
@@ -127,16 +171,26 @@ export const Operator: FC<ComponentPropsWithoutRef<"div">> = ({ ...props }) => {
                 </Text>
                 <IncreaseOperatorFeeStatusBadge />
               </div>
-              <div className="flex flex-col gap-4">
-                <BalanceDisplay amount={yearlyFeeEth} token="ETH" />
-                {yearlyFeeSSV > 0 && (
-                  <BalanceDisplay amount={yearlyFeeSSV} token="SSV" />
-                )}
-              </div>
+              {feesStatus.isUnavailable ? (
+                <AmountUnavailable />
+              ) : feesStatus.isPending ? (
+                <AmountSkeleton />
+              ) : (
+                <div className="flex flex-col gap-4">
+                  <BalanceDisplay amount={yearlyFeeEth} token="ETH" />
+                  {yearlyFeeSSV > 0 && (
+                    <BalanceDisplay amount={yearlyFeeSSV} token="SSV" />
+                  )}
+                </div>
+              )}
               <Tooltip
                 asChild
                 content={
-                  feeEth.data === 0n ? (
+                  feesStatus.isUnavailable ? (
+                    "Fee unavailable"
+                  ) : feesStatus.isPending ? (
+                    "Loading fee"
+                  ) : feeEth.data === 0n ? (
                     <>
                       Operators with a fee of 0 cannot change their fee.{" "}
                       <Button
@@ -154,7 +208,7 @@ export const Operator: FC<ComponentPropsWithoutRef<"div">> = ({ ...props }) => {
               >
                 <Button
                   as={Link}
-                  disabled={feeEth.isLoading || feeEth.data === 0n}
+                  disabled={!canUpdateFee}
                   to="fee/update"
                   variant="secondary"
                   size="xl"

src/hooks/operator/use-operator-earnings-and-fees.ts

@@ -2,19 +2,52 @@ import { useGetOperatorEarnings } from "@/lib/contract-interactions/hooks/getter
 import { useGetOperatorEarningsSSV } from "@/lib/contract-interactions/hooks/getter";
 import { useGetOperatorFee } from "@/lib/contract-interactions/hooks/getter";
 import { useGetOperatorFeeSSV } from "@/lib/contract-interactions/hooks/getter";
+import { combineQueryStatus } from "@/lib/react-query";
 import { getYearlyFee } from "@/lib/utils/operator";
 
+type FetchStatusOnly = { fetchStatus: "fetching" | "paused" | "idle" };
+
+// A read that cannot reach the RPC parks at fetchStatus "paused" and never
+// resolves to an error, so paused counts as unavailable too.
+const withUnavailable = <T extends { isError: boolean; isPending: boolean }>(
+  status: T,
+  queries: FetchStatusOnly[],
+) => {
+  const isPaused = queries.some((query) => query.fetchStatus === "paused");
+  return {
+    ...status,
+    isPaused,
+    isUnavailable: status.isError || isPaused,
+    isPending: status.isPending && !isPaused,
+  };
+};
+
 export const useOperatorEarningsAndFees = (operatorId: bigint) => {
-  const earningsEth = useGetOperatorEarnings({ id: operatorId });
-  const earningsSSV = useGetOperatorEarningsSSV({ id: operatorId });
+  const queryOptions = { retry: 2, networkMode: "always" } as const;
 
-  const feeEth = useGetOperatorFee({ operatorId });
-  const feeSSV = useGetOperatorFeeSSV({ operatorId });
+  const earningsEth = useGetOperatorEarnings({ id: operatorId }, queryOptions);
+  const earningsSSV = useGetOperatorEarningsSSV(
+    { id: operatorId },
+    queryOptions,
+  );
+
+  const feeEth = useGetOperatorFee({ operatorId }, queryOptions);
+  const feeSSV = useGetOperatorFeeSSV({ operatorId }, queryOptions);
   const yearlyFeeEth = getYearlyFee(feeEth.data ?? 0n);
   const yearlyFeeSSV = getYearlyFee(feeSSV.data ?? 0n);
   const balanceEth = earningsEth.data ?? 0n;
   const balanceSSV = earningsSSV.data ?? 0n;
 
+  // `?? 0n` above is indistinguishable from an on-chain zero — gate on these.
+  const earningsStatus = withUnavailable(
+    combineQueryStatus(earningsEth, earningsSSV),
+    [earningsEth, earningsSSV],
+  );
+  const feesStatus = withUnavailable(combineQueryStatus(feeEth, feeSSV), [
+    feeEth,
+    feeSSV,
+  ]);
+
   return {
     earningsEth,
     earningsSSV,
@@ -24,5 +57,7 @@ export const useOperatorEarningsAndFees = (operatorId: bigint) => {
     yearlyFeeSSV,
     balanceEth,
     balanceSSV,
+    earningsStatus,
+    feesStatus,
   };
 };