update minipool cards

Author: santteegt

build/api/src/AppConfig.ts

@@ -6,6 +6,7 @@ interface Config {
   brainUIUrl: string;
   w3sUrl: string;
   rpExplorerUrl: string;
+  beaconchaInUrl: string;
   explorerUrl: string;
   package: string;
 }
@@ -25,6 +26,7 @@ class AppConfig {
       brainUIUrl: `http://brain.web3signer${w3sSuffix}.dappnode`,
       w3sUrl: `http://web3signer.web3signer${w3sSuffix}.dappnode:9000`,
       rpExplorerUrl: `https://${networkPrefix}rocketscan.io`,
+      beaconchaInUrl: `https://${networkPrefix}beaconcha.in`,
       explorerUrl: `https://${networkPrefix}etherscan.io`,
       package: isMainnet ? `rocketpool.public.dappnode` : `rocketpool-testnet.public.dappnode`,
     };

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

@@ -8,10 +8,12 @@ import ImportToSignerDialog from "./ImportToSignerDialog";
 
 function MinipoolCard({
   data,
-  rpExplorerUrl,
+  beaconchaInUrl,
+  // rpExplorerUrl,  
 }: {
   data: Minipool;
   rpExplorerUrl?: string;
+  beaconchaInUrl?: string;
 }): JSX.Element {
   const [importToSignerDialogOpen, setImportToSignerDialogOpen] =
     React.useState<boolean>(false);
@@ -40,6 +42,12 @@ function MinipoolCard({
             sx={{ backgroundColor: { backgroundColor } }}
           />
         </div>
+        <div className="validator-status">
+          <Chip
+            label={data.validator.active ? "Active" : "Inactive"}
+            sx={{ backgroundColor: data.validator.active ? "#81C784" : "#E57373" }}
+          />
+        </div>
 
         <Typography color="text.secondary" className="minipool-ether">
           {toEtherString(
@@ -56,15 +64,15 @@ function MinipoolCard({
 
         <div className="explorer-button-container">
           <Button
-            href={`${rpExplorerUrl}/minipool/${data.address}`}
+            href={`${beaconchaInUrl}/validator/${data.validatorPubkey}`}
             variant="outlined"
             color="primary"
             target="_blank"
             rel="noopener"
             endIcon={<OpenInNewIcon />}
             className="minipool-button"
           >
-            View on RocketScan
+            View on Beaconcha.in
           </Button>
           <Button
             variant="contained"

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

@@ -47,9 +47,12 @@ const MinipoolDetails: React.FC<MinipoolDetailsProps> = ({
             }}
           >
             {minipoolStatus?.minipools.map((minipool, index) => (
-              <>
-                <MinipoolCard data={minipool} key={index} rpExplorerUrl={data?.config?.rpExplorerUrl} />
-              </>
+              <MinipoolCard
+                key={index}
+                data={minipool}
+                beaconchaInUrl={data?.config?.beaconchaInUrl}
+                rpExplorerUrl={data?.config?.rpExplorerUrl}
+              />
             ))}
           </Grid>
           {minipoolStatus?.error && (

build/ui/src/types/AppConfig.ts

@@ -4,6 +4,7 @@ export interface Config {
   brainUIUrl: string;
   w3sUrl: string;
   rpExplorerUrl: string;
+  beaconchaInUrl: string;
   explorerUrl: string;
   package: string;
 }