add better minipool status management + display minipool address

Author: santteegt

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

@@ -1,10 +1,12 @@
 import React from "react";
-import { Card, CardContent, Typography, Chip, Button } from "@mui/material";
-import { Minipool } from "../../types/MinipoolStatus";
-import { toEtherString } from "../../utils/Utils";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
-import "./minipool.css";
+import { Button, Card, CardContent, Chip, Tooltip, Typography } from "@mui/material";
+import CopyToClipboardButton from "../Buttons/CopyToClipboardButton";
+import { Minipool } from "../../types/MinipoolStatus";
+import { ethBalanceGreaterThanMinStake, shortenAddress, toEtherString } from "../../utils/Utils";
 import ImportToSignerDialog from "./ImportToSignerDialog";
+import "./minipool.css";
+
 
 function MinipoolCard({
   data,
@@ -17,6 +19,7 @@ function MinipoolCard({
 }): JSX.Element {
   const [importToSignerDialogOpen, setImportToSignerDialogOpen] =
     React.useState<boolean>(false);
+  const [showAddress, setShowAddress] = React.useState<boolean>(false);
 
   const backgroundColor =
     data.status.status === "Staking"
@@ -25,6 +28,22 @@ function MinipoolCard({
       ? "#E57373"
       : "#FFB74D";
 
+  const validatorStatus = data.finalised 
+    ? "Exited"
+    : (data.validator.active
+      ? "Active"
+      : (data.status.status === "Staking" && ethBalanceGreaterThanMinStake(data.balances.eth)
+        ? "Ready to Close"
+        : "Inactive"
+      )
+    );
+  const validatorStatusColor =
+    data.finalised || data.validator.active
+      ? "#81C784"
+      : validatorStatus === "Ready to Close" || data.status.status === "Prelaunch"
+      ? "#FFC107"
+      : "#E57373";
+
   return (
     <Card
       sx={{
@@ -36,16 +55,28 @@ function MinipoolCard({
     >
       <CardContent>
         <div className="chip-container">
-          <Chip label={`#${data.validator.index}`} />
+          <div className="chip-with-clipboard-container">
+            <Tooltip title={showAddress ? "Minipool Address" : "Validator Index"}>
+              <Chip 
+                label={showAddress ? shortenAddress(data.address) : `#${data.validator.index}`}
+                onClick={() => setShowAddress(!showAddress)}
+                sx={{ cursor: 'pointer' }}
+              />
+            </Tooltip>
+            <CopyToClipboardButton 
+              value={showAddress ? data.address : data.validator.index.toString()}
+              fontSize="small"
+            />
+          </div>
           <Chip
             label={data.finalised ? "Finalised" : data.status.status}
             sx={{ backgroundColor: data.finalised ? "#FFC107" : backgroundColor }}
           />
         </div>
         <div className="validator-status">
           <Chip
-            label={data.finalised ? "Exited" : (data.validator.active ? "Active" : "Inactive")}
-            sx={{ backgroundColor: data.finalised || data.validator.active ? "#81C784" : "#E57373" }}
+            label={validatorStatus}
+            sx={{ backgroundColor: validatorStatusColor }}
           />
         </div>
 

build/ui/src/components/Setup/minipool.css

@@ -39,11 +39,17 @@
   margin-bottom: 0.5rem;
 }
 
+.chip-with-clipboard-container {
+  display: flex;
+  align-items: center;
+}
+
 .explorer-button-container {
   margin-top: 1rem;
 }
 
 .minipool-ether {
+  margin-top: 0.5rem !important;
   margin-bottom: 0.5rem !important;
   font-weight: bold !important;
 }

build/ui/src/utils/Utils.ts

@@ -41,4 +41,9 @@ export function enoughEthBalance(
   return is8EthPool ? ethBalance >= minimum8Eth : ethBalance >= minimum16Eth;
 }
 
+export function ethBalanceGreaterThanMinStake(ethBalance: number): boolean {
+  const minStake = BigInt(32 * 10 ** 18);
+  return BigInt(ethBalance) > minStake;
+}
+
 export const escapeNewLine = (text: string) => text.replace(/(\\n)/g, "\n");