refactor minipool+validator status logic for better readability and maintainability

Author: santteegt

build/ui/src/components/Setup/MinipoolCard.tsx

@@ -7,6 +7,129 @@ import { ethBalanceGreaterThanMinStake, shortenAddress, toEtherString } from "..
 import ImportToSignerDialog from "./ImportToSignerDialog";
 import "./minipool.css";
 
+enum MinipoolStatus {
+  STAKING = "Staking",
+  DISSOLVED = "Dissolved",
+  PRELAUNCH = "Prelaunch",
+  FINALISED = "Finalised"
+}
+
+enum ValidatorStatus {
+  EXITED = "Exited",
+  ENQUEUED = "Enqueued",
+  ACTIVE = "Active",
+  READY_TO_CLOSE = "Ready to Close",
+  INACTIVE = "Inactive"
+}
+
+// Color theme constants
+const COLOR_THEME = {
+  SUCCESS: "#81C784",    // Green
+  WARNING: "#FFC107",    // Amber
+  ERROR: "#E57373",      // Red
+  INFO: "#FFB74D"        // Orange
+} as const;
+
+// Status information interface
+interface StatusInfo {
+  status: string;
+  color: string;
+}
+
+// Validator Status Service
+class ValidatorStatusService {
+  /**
+   * Determines the minipool status and returns status info
+   */
+  getMinipoolStatusInfo(minipoolData: Minipool): StatusInfo {
+    const status = this.determineMinipoolStatus(minipoolData);
+    const color = this.getMinipoolStatusColor(status);
+    return { status, color };
+  }
+
+  /**
+   * Determines the validator status and returns status info
+   */
+  getValidatorStatusInfo(minipoolData: Minipool): StatusInfo {
+    const status = this.determineValidatorStatus(minipoolData);
+    const color = this.getValidatorStatusColor(status, minipoolData);
+    return { status, color };
+  }
+
+  /**
+   * Determines the minipool status based on finalised state
+   */
+  private determineMinipoolStatus(minipoolData: Minipool): string {
+    return minipoolData.finalised ? MinipoolStatus.FINALISED : minipoolData.status.status;
+  }
+
+  /**
+   * Determines the validator status with priority-based logic
+   */
+  private determineValidatorStatus(minipoolData: Minipool): string {
+    // Priority 1: Check if finalised
+    if (minipoolData.finalised) {
+      return ValidatorStatus.EXITED;
+    }
+
+    // Priority 2: Check if enqueued (staking but no validator index)
+    if (minipoolData.status.status === MinipoolStatus.STAKING && !minipoolData.validator.index) {
+      return ValidatorStatus.ENQUEUED;
+    }
+
+    // Priority 3: Check if validator is active
+    if (minipoolData.validator.active) {
+      return ValidatorStatus.ACTIVE;
+    }
+
+    // Priority 4: Check if ready to close (staking with sufficient balance)
+    if (minipoolData.status.status === MinipoolStatus.STAKING && 
+        ethBalanceGreaterThanMinStake(minipoolData.balances.eth)) {
+      return ValidatorStatus.READY_TO_CLOSE;
+    }
+
+    // Default: Inactive
+    return ValidatorStatus.INACTIVE;
+  }
+
+  /**
+   * Gets the color for minipool status
+   */
+  private getMinipoolStatusColor(status: string): string {
+    switch (status) {
+      case MinipoolStatus.STAKING:
+        return COLOR_THEME.SUCCESS;
+      case MinipoolStatus.DISSOLVED:
+        return COLOR_THEME.ERROR;
+      case MinipoolStatus.FINALISED:
+        return COLOR_THEME.WARNING;
+      default:
+        return COLOR_THEME.INFO;
+    }
+  }
+
+  /**
+   * Gets the color for validator status
+   */
+  private getValidatorStatusColor(validatorStatus: string, minipoolData: Minipool): string {
+    // Success color for finalised or active validators
+    if (minipoolData.finalised || minipoolData.validator.active) {
+      return COLOR_THEME.SUCCESS;
+    }
+
+    // Warning color for prelaunch, enqueued, or ready to close
+    if (minipoolData.status.status === MinipoolStatus.PRELAUNCH || 
+        [ValidatorStatus.ENQUEUED, ValidatorStatus.READY_TO_CLOSE].includes(validatorStatus as ValidatorStatus)) {
+      return COLOR_THEME.WARNING;
+    }
+
+    // Error color for inactive
+    return COLOR_THEME.ERROR;
+  }
+};
+
+// Initialize status service
+const statusService = new ValidatorStatusService();
 
 function MinipoolCard({
   data,
@@ -20,31 +143,10 @@ function MinipoolCard({
   const [importToSignerDialogOpen, setImportToSignerDialogOpen] =
     React.useState<boolean>(false);
   const [showAddress, setShowAddress] = React.useState<boolean>(false);
-
-  const backgroundColor =
-    data.status.status === "Staking"
-      ? "#81C784"
-      : data.status.status === "Dissolved"
-      ? "#E57373"
-      : "#FFB74D";
-
-  const validatorStatus = data.finalised 
-    ? "Exited"
-    : (!data.validator.index && data.status.status === "Staking")
-    ? "Enqueued"
-    : (data.validator.active
-      ? "Active"
-      : (data.status.status === "Staking" && ethBalanceGreaterThanMinStake(data.balances.eth)
-        ? "Ready to Close"
-        : "Inactive"
-      )
-    );
-  const validatorStatusColor =
-    data.finalised || data.validator.active
-      ? "#81C784"
-      : (data.status.status === "Prelaunch" || ["Enqueued", "Ready to Close"].includes(validatorStatus))
-      ? "#FFC107"
-      : "#E57373";
+  
+  // Get status information using the service
+  const minipoolStatusInfo = statusService.getMinipoolStatusInfo(data);
+  const validatorStatusInfo = statusService.getValidatorStatusInfo(data);
 
   return (
     <Card
@@ -71,14 +173,14 @@ function MinipoolCard({
             />
           </div>
           <Chip
-            label={data.finalised ? "Finalised" : data.status.status}
-            sx={{ backgroundColor: data.finalised ? "#FFC107" : backgroundColor }}
+            label={minipoolStatusInfo.status}
+            sx={{ backgroundColor: minipoolStatusInfo.color }}
           />
         </div>
         <div className="validator-status">
           <Chip
-            label={validatorStatus}
-            sx={{ backgroundColor: validatorStatusColor }}
+            label={validatorStatusInfo.status}
+            sx={{ backgroundColor: validatorStatusInfo.color }}
           />
         </div>