stereum-dev · mabasian · Jul 17, 2024 · Jul 17, 2024
diff --git a/launcher/public/output.css b/launcher/public/output.css
@@ -1087,6 +1087,10 @@ video {
   grid-column-start: 14;
 }
 
+.col-start-16{
+  grid-column-start: 16;
+}
+
 .col-start-17{
   grid-column-start: 17;
 }
@@ -1535,6 +1539,10 @@ video {
   margin-top: 1rem;
 }
 
+.mt-40{
+  margin-top: 10rem;
+}
+
 .mt-5{
   margin-top: 1.25rem;
 }
@@ -1608,6 +1616,10 @@ video {
   height: 33.333333%;
 }
 
+.h-1\/6{
+  height: 16.666667%;
+}
+
 .h-10{
   height: 2.5rem;
 }
@@ -1652,6 +1664,10 @@ video {
   height: 75%;
 }
 
+.h-3\/6{
+  height: 50%;
+}
+
 .h-32{
   height: 8rem;
 }
@@ -2098,6 +2114,10 @@ video {
   width: 66.666667%;
 }
 
+.w-2\/4{
+  width: 50%;
+}
+
 .w-20{
   width: 5rem;
 }
@@ -2262,6 +2282,10 @@ video {
   width: 32px;
 }
 
+.w-\[35\%\]{
+  width: 35%;
+}
+
 .w-\[38px\]{
   width: 38px;
 }
@@ -3857,6 +3881,11 @@ video {
   background-color: rgb(96 152 121 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#70E763\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(112 231 99 / var(--tw-bg-opacity));
+}
+
 .bg-\[\#A0A0A0\]{
   --tw-bg-opacity: 1;
   background-color: rgb(160 160 160 / var(--tw-bg-opacity));
@@ -3867,6 +3896,11 @@ video {
   background-color: rgb(209 187 158 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#EB5353\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(235 83 83 / var(--tw-bg-opacity));
+}
+
 .bg-\[\#F7C566\]{
   --tw-bg-opacity: 1;
   background-color: rgb(247 197 102 / var(--tw-bg-opacity));

diff --git a/launcher/src/components/UI/the-control/AmsterdamComponent.vue b/launcher/src/components/UI/the-control/AmsterdamComponent.vue
@@ -19,7 +19,7 @@
         </div>
       </div>
       <no-data
-        v-else-if="missingServices.length > 0 || !isConsensusRunning || prometheusIsOff"
+        v-else-if="isConsensusMissing || !isConsensusRunning || prometheusIsOff"
         @mouseenter="cursorLocation = `${nodataMessage}`"
         @mouseleave="cursorLocation = ''"
       />
@@ -36,9 +36,9 @@
                 red: n.slotStatus == 'missed',
               }"
               @mouseenter="
-                cursorLocation = `the current epoch: ${
-                  currentResult.currentEpoch
-                } and the slot number is ${n.slotNumber === 0 ? 'N/A' : n.slotNumber}`
+                cursorLocation = `the current epoch: ${currentResult.currentEpoch} and the slot number is ${
+                  n.slotNumber === 0 ? 'N/A' : n.slotNumber
+                }`
               "
               @mouseleave="cursorLocation = ''"
             ></div>
@@ -175,6 +175,9 @@ export default {
         }));
       }
     },
+    isConsensusMissing() {
+      return this.missingServices?.includes("consensus");
+    },
     getSetupNetwork() {
       let setupNet;
       const net = this.selectedSetup?.network;
@@ -234,17 +237,11 @@ export default {
     },
     currentResult: {
       handler(newResult) {
-        if (
-          newResult &&
-          newResult.currentEpochStatus &&
-          newResult.currentEpochStatus[0]
-        ) {
-          const newArray = newResult.currentEpochStatus[0]
-            .slice(0, this.proposedBlock.length)
-            .map((slot) => ({
-              slotNumber: slot.slotNumber,
-              slotStatus: slot.slotStatus,
-            }));
+        if (newResult && newResult.currentEpochStatus && newResult.currentEpochStatus[0]) {
+          const newArray = newResult.currentEpochStatus[0].slice(0, this.proposedBlock.length).map((slot) => ({
+            slotNumber: slot.slotNumber,
+            slotStatus: slot.slotStatus,
+          }));
 
           while (newArray.length < this.proposedBlock.length) {
             newArray.push({ slotNumber: 0, slotStatus: "pending" });
@@ -289,17 +286,13 @@ export default {
       }
 
       const categories = ["consensus", "execution"];
-      const missingCategories = categories.filter(
-        (category) => !foundCategories.has(category)
-      );
+      const missingCategories = categories.filter((category) => !foundCategories.has(category));
 
       if (!hasPrometheus) {
         missingCategories.push("Prometheus");
       }
 
-      this.installedServicesController = missingCategories
-        .join(", ")
-        .replace(/, (?=[^,]*$)/, " and ");
+      this.installedServicesController = missingCategories.join(", ").replace(/, (?=[^,]*$)/, " and ");
     },
 
     refreshTimer() {

diff --git a/launcher/src/components/UI/the-control/EpochSlot.vue b/launcher/src/components/UI/the-control/EpochSlot.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="epockSlot_parent">
-    <NoData v-if="missingServices.length > 0 || isConsensusRunning" />
+    <NoData v-if="isConsensusMissing || isConsensusRunning" />
     <div v-else-if="flag" class="wrapper">
       {{ beaconControler }}
     </div>
@@ -49,6 +49,9 @@ export default {
       missingServices: "missingServices",
       nodataMessage: "nodataMessage",
     }),
+    isConsensusMissing() {
+      return this.missingServices?.includes("consensus");
+    },
     beaconControler() {
       if (this.currentResult === undefined) {
         return "Checking Beacon Status...";

diff --git a/launcher/src/components/UI/the-control/PeerToPeer.vue b/launcher/src/components/UI/the-control/PeerToPeer.vue
@@ -9,7 +9,7 @@
       </div>
       <div class="wrapper">
         <no-data
-          v-if="missingServices.length > 0 || prometheusIsOff || !isConsensusRunning"
+          v-if="isConsensusMissing || prometheusIsOff || !isConsensusRunning"
           @mouseenter="cursorLocation = `${nodataMessage}`"
           @mouseleave="cursorLocation = ''"
         />
@@ -144,6 +144,9 @@ export default {
     secondBar() {
       return { width: this.executionValPeer + "%" };
     },
+    isConsensusMissing() {
+      return this.missingServices?.includes("consensus");
+    },
   },
   watch: {
     selectedSetup() {

diff --git a/launcher/src/components/UI/the-control/SyncStatus.vue b/launcher/src/components/UI/the-control/SyncStatus.vue
@@ -10,7 +10,7 @@
       <div class="wrapper">
         <!--new form start-->
         <no-data
-          v-if="missingServices.length > 0 || prometheusIsOff"
+          v-if="isConsensusMissing || prometheusIsOff"
           @mouseenter="cursorLocation = `${nodataMessage}`"
           @mouseleave="cursorLocation = ''"
         />
@@ -20,19 +20,14 @@
               <span>{{ consensusName }}</span>
             </div>
             <div class="progressBox">
-              <sync-circular-progress
-                :color="consensuColor"
-                :sync-percent="consensusPer"
-              />
+              <sync-circular-progress :color="consensuColor" :sync-percent="consensusPer" />
             </div>
             <div class="syncStatusStatus" :class="consensusClass">
               <span>{{ consensusText }}</span>
             </div>
             <div
               class="consensusIconCons"
-              @mouseenter="
-                cursorLocation = `${consensusName} : ${consensusFirstVal} / ${consensusSecondVal}`
-              "
+              @mouseenter="cursorLocation = `${consensusName} : ${consensusFirstVal} / ${consensusSecondVal}`"
               @mouseleave="cursorLocation = ''"
             >
               <img :src="clientImage(consensusName)" alt="consensus" />
@@ -44,19 +39,14 @@
               <span>{{ executionName }}</span>
             </div>
             <div class="progressBox">
-              <sync-circular-progress
-                :color="executionColor"
-                :sync-percent="executionPer"
-              />
+              <sync-circular-progress :color="executionColor" :sync-percent="executionPer" />
             </div>
             <div class="syncStatusStatus" :class="executionClass">
               <span>{{ executionText }}</span>
             </div>
             <div
               class="executionIconCons"
-              @mouseenter="
-                cursorLocation = `${executionName} : ${executionFirstVal} / ${executionSecondVal}`
-              "
+              @mouseenter="cursorLocation = `${executionName} : ${executionFirstVal} / ${executionSecondVal}`"
               @mouseleave="cursorLocation = ''"
             >
               <img :src="clientImage(executionName)" alt="execution" />
@@ -191,6 +181,9 @@ export default {
     ...mapState(useSetups, {
       selectedSetup: "selectedSetup",
     }),
+    isConsensusMissing() {
+      return this.missingServices?.includes("consensus");
+    },
 
     errorIco() {
       return this.syncIco[0].icon;
@@ -248,10 +241,7 @@ export default {
           return false;
         }
 
-        return (
-          setupServices.includes(consensusService) &&
-          setupServices.includes(executionService)
-        );
+        return setupServices.includes(consensusService) && setupServices.includes(executionService);
       });
     },
   },
@@ -279,9 +269,7 @@ export default {
       }
       const lowerCaseInputValue = name.toLowerCase();
       const clientData = [...this.consensusClientsData, ...this.executionClientsData];
-      const matchingClient = clientData.find(
-        (client) => client.name.toLowerCase() === lowerCaseInputValue
-      );
+      const matchingClient = clientData.find((client) => client.name.toLowerCase() === lowerCaseInputValue);
 
       if (name === this.consensusName) {
         this.currentConsensusIcon = matchingClient.img;

diff --git a/launcher/src/components/UI/the-control/TheBalance.vue b/launcher/src/components/UI/the-control/TheBalance.vue
@@ -1,15 +1,24 @@
 <template>
   <div class="balance-parent">
-    <NoData v-if="missingServices.length > 0" service-cat="install" />
+    <NoData v-if="isConsensusMissing" />
     <div v-else class="wrapper">
       <div class="finalized-box">
-        <div class="finalized-value" @mouseenter="cursorLocation = `${finEPOCH} `" @mouseleave="cursorLocation = ''">
+        <div
+          class="finalized-value"
+          @mouseenter="cursorLocation = `${finEPOCH} `"
+          @mouseleave="cursorLocation = ''"
+        >
           {{ finalized_epoch }}
         </div>
         <div class="title">{{ $t("balWid.fin") }} EPOCH</div>
       </div>
       <div class="balance-box">
-        <div class="balance-value" :style="{ color: balance < 0 ? '#EC590A' : '#74fa65' }">{{ fmtBalance }} GWei</div>
+        <div
+          class="balance-value"
+          :style="{ color: balance < 0 ? '#EC590A' : '#74fa65' }"
+        >
+          {{ fmtBalance }} GWei
+        </div>
         <div class="title">{{ $t("balWid.bal") }}</div>
       </div>
     </div>
@@ -43,6 +52,9 @@ export default {
       installedServicesController: "installedServicesController",
       missingServices: "missingServices",
     }),
+    isConsensusMissing() {
+      return this.missingServices?.includes("consensus");
+    },
   },
 
   watch: {