fix(cluster): [SSV-WEB-003] gate register and fee rows on the cluster read, show unavailable funding summary

Author: Chris-ssvlabs

src/app/routes/create-cluster/register-validator-confirmation.tsx

@@ -255,6 +255,9 @@ export const RegisterValidatorConfirmation: FC = () => {
           size="xl"
           isLoading={isPending}
           isActionBtn
+          // Without the existing cluster's on-chain state the transaction
+          // would be sent with a zeroed cluster struct and revert.
+          disabled={isRunwayUnavailable || isRunwayLoading}
           onClick={handleRegisterValidator}
         >
           Register Validator

src/app/routes/dashboard/clusters/cluster/migrated/operational-runway-card.tsx

@@ -64,25 +64,36 @@ export const OperationalRunwayCard: FC<OperationalRunwayCardProps> = ({
   const runwayState = toValueState(
     runwayQuery.isUnavailable,
     runwayQuery.isPending,
+    runwayQuery.isIdle,
   );
 
   // getBalance reverts for liquidated clusters; keep showing the API value
   // there as before. Otherwise never show the API snapshot as the balance.
   // Same liquidation source as useClusterBalance / useClusterRunway (API).
   const balanceStatus = withUnavailable(balance, [balance]);
+  // The balance read is disabled (idle) until the cluster has loaded.
   const balanceState = toValueState(
     !cluster.data?.isLiquidated && balanceStatus.isUnavailable,
     balanceStatus.isPending,
+    balanceStatus.isIdle,
   );
 
   // Fees are computed over `operators ?? []`, so a missing operators read
-  // would silently drop the operator fee.
+  // would silently drop the operator fee. Without the cluster the operator
+  // list is `[]`, which useOperators resolves successfully: track the cluster
+  // read as well.
+  const clusterStatus = withUnavailable(cluster, [cluster]);
   const operatorsStatus = withUnavailable(operatorsQuery, [operatorsQuery]);
   // useOperators has no `watch`: retry a failed read until it recovers.
   useRefetchWhileUnavailable([operatorsQuery], operatorsStatus.isUnavailable);
   const feesState = toValueState(
-    fundingCost.isUnavailable || operatorsStatus.isUnavailable,
-    fundingCost.isLoading || operatorsStatus.isPending || !fundingCost.data,
+    fundingCost.isUnavailable ||
+      operatorsStatus.isUnavailable ||
+      (!cluster.data && clusterStatus.isUnavailable),
+    fundingCost.isLoading ||
+      operatorsStatus.isPending ||
+      !fundingCost.data ||
+      !cluster.data,
   );
 
   const operationalBalanceState = toValueState(
@@ -327,8 +338,14 @@ type ValueState = {
   isReady: boolean;
 };
 
-const toValueState = (isUnavailable: boolean, isPending: boolean) => {
-  const pending = !isUnavailable && isPending;
+// Idle (a read disabled until its input loads) counts as pending: the value
+// shown meanwhile is a fallback, not a read.
+const toValueState = (
+  isUnavailable: boolean,
+  isPending: boolean,
+  isIdle = false,
+) => {
+  const pending = !isUnavailable && (isPending || isIdle);
   return {
     isUnavailable,
     isPending: pending,

src/app/routes/switch-wizard/switch-wizard-step-two.tsx

@@ -23,11 +23,14 @@ export const SwitchWizardStepTwoRoute = () => {
   const clusterRunway = useClusterRunway(clusterHash);
   // The runway is computed from defaulted inputs until its reads resolve, so
   // it must not seed the "current runway" funding period before then.
-  const currentRunwayStatus = clusterRunway.isUnavailable
-    ? "unavailable"
-    : clusterRunway.isPending || clusterRunway.isIdle
-      ? "pending"
-      : "ready";
+  // Idle means the cluster isn't there to read, which never resolves on its
+  // own: show it as unavailable rather than an endless skeleton.
+  const currentRunwayStatus =
+    clusterRunway.isUnavailable || clusterRunway.isIdle
+      ? "unavailable"
+      : clusterRunway.isPending
+        ? "pending"
+        : "ready";
 
   const operatorsQuery = useOperators(cluster.data?.operators ?? []);
   const operators = operatorsQuery.data ?? [];

src/components/cluster/cluster-funding-summary.tsx

@@ -6,6 +6,7 @@ import { Text } from "@/components/ui/text";
 import { formatSSV } from "@/lib/utils/number";
 import { Divider } from "@/components/ui/divider";
 import { Spinner } from "@/components/ui/spinner";
+import { Tooltip } from "@/components/ui/tooltip";
 import { humanizeFundingDuration } from "@/lib/utils/date";
 
 export type ClusterFundingSummaryProps = UseFundingCostArgs;
@@ -29,6 +30,22 @@ export const ClusterFundingSummary: ClusterFundingSummaryFC = ({
     effectiveBalance,
   });
 
+  if (cost.isUnavailable) {
+    return (
+      <div className="flex justify-center items-center p-8">
+        <Tooltip content="Couldn't read the network fees. The summary will appear once the connection recovers.">
+          <Text
+            data-testid="cluster-funding-summary-unavailable"
+            variant="body-2-medium"
+            className="text-error-500"
+          >
+            Unavailable
+          </Text>
+        </Tooltip>
+      </div>
+    );
+  }
+
   if (cost.isLoading) {
     return (
       <div className="flex justify-center items-center p-8">