From 88c7ea52f5e18173952262433d9faa89957a9556 Mon Sep 17 00:00:00 2001
From: gbayasgalan <bayasgalan.gantumur@rocklogic.at>
Date: Thu, 12 Sep 2024 14:58:22 +0200
Subject: [PATCH] format check

---
 .../components/drawer/DrawerFilter.vue        |  44 +--
 .../components/drawer/ServicesDrawer.vue      |  35 +-
 .../UI/node-page/sections/ExpertWindow.vue    | 327 ++++--------------
 .../UI/the-control/AmsterdamComponent.vue     |  64 ++--
 .../UI/the-control/ControlAlert.vue           |  93 ++---
 .../components/UI/the-control/EpochSlot.vue   |  12 +-
 .../components/UI/the-control/TheBalance.vue  |  13 +-
 7 files changed, 135 insertions(+), 453 deletions(-)

diff --git a/launcher/src/components/UI/edit-page/components/drawer/DrawerFilter.vue b/launcher/src/components/UI/edit-page/components/drawer/DrawerFilter.vue
index e80f61d31..5c65fbff7 100644
--- a/launcher/src/components/UI/edit-page/components/drawer/DrawerFilter.vue
+++ b/launcher/src/components/UI/edit-page/components/drawer/DrawerFilter.vue
@@ -1,13 +1,8 @@
 <template>
   <div class="col-start-1 col-span-full row-start-2 row-span-1 z-10 flex">
     <div class="w-full relative mt-1">
-      <button
-        class="relative w-full cursor-default rounded-md bg-gray-200 p-1 text-left shadow-md text-sm"
-        @click="toggleDropdown"
-      >
-        <span
-          class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
-        >
+      <button class="relative w-full cursor-default rounded-md bg-gray-200 p-1 text-left shadow-md text-sm" @click="toggleDropdown">
+        <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
           <ChevronUpDownIcon class="h-3 w-3 text-gray-400" aria-hidden="true" />
         </span>
         <span class="block truncate text-center capitalize">{{ selectedFilter }}</span>
@@ -28,10 +23,7 @@
             class="flex justify-center cursor-default select-none p-1 text-gray-900 hover:bg-gray-300"
             @click="selectFilter(filter.name)"
           >
-            <span
-              v-if="selectedFilter === filter.name"
-              class="flex items-center text-cyan-600"
-            >
+            <span v-if="selectedFilter === filter.name" class="flex items-center text-cyan-600">
               <CheckIcon class="h-3 w-3" aria-hidden="true" />
             </span>
             <span
@@ -57,13 +49,7 @@ import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import { useSetups } from "../../../../../store/setups";
 
-const filters = [
-  { name: "all" },
-  { name: "execution" },
-  { name: "consensus" },
-  { name: "validator" },
-  { name: "service" },
-];
+const filters = [{ name: "all" }, { name: "execution" }, { name: "consensus" }, { name: "validator" }, { name: "service" }];
 
 const serviceStore = useServices();
 const setupStore = useSetups();
@@ -85,9 +71,7 @@ const selectFilter = (filter) => {
 const archFilter = (service) => {
   const armArchs = ["arm", "arm64", "aarch64_be", "aarch64", "armv8b", "armv8l"];
 
-  return armArchs.includes(manageStore.architecture)
-    ? !/(Prysm|ValidatorEjector|KeysAPI|Notification)/.test(service.service)
-    : true;
+  return armArchs.includes(manageStore.architecture) ? !/(Prysm|ValidatorEjector|KeysAPI|Notification)/.test(service.service) : true;
 };
 
 const networkFilter = (service) => {
@@ -99,9 +83,7 @@ const networkFilter = (service) => {
     case "sepolia":
       return service.service !== "SSVNetworkService";
     case "gnosis":
-      return /(Lighthouse|Teku|Nethermind|Erigon|Grafana|Prometheus)/.test(
-        service.service
-      );
+      return /(Lighthouse|Teku|Nethermind|Erigon|Grafana|Prometheus)/.test(service.service);
     case "devnet":
       return;
     default:
@@ -113,14 +95,8 @@ const determineCurrentNetwork = () => {
   const selectedNetwork = setupStore.selectedSetup?.network;
 
   if (selectedNetwork) {
-    const foundNetwork = manageStore.networkList.find(
-      (network) => network.network === selectedNetwork
-    );
-    currentNetwork.value = foundNetwork
-      ? foundNetwork.network
-      : selectedNetwork === "devnet"
-      ? selectedNetwork
-      : null;
+    const foundNetwork = manageStore.networkList.find((network) => network.network === selectedNetwork);
+    currentNetwork.value = foundNetwork ? foundNetwork.network : selectedNetwork === "devnet" ? selectedNetwork : null;
   }
 };
 
@@ -135,9 +111,7 @@ const filteredServices = computed(() => {
   const filterName = selectedFilter.value ?? "all";
   return filterName === "all"
     ? networkArchFilteredServices.value
-    : networkArchFilteredServices.value.filter(
-        (service) => service.category === filterName
-      );
+    : networkArchFilteredServices.value.filter((service) => service.category === filterName);
 });
 
 // Watchers
diff --git a/launcher/src/components/UI/edit-page/components/drawer/ServicesDrawer.vue b/launcher/src/components/UI/edit-page/components/drawer/ServicesDrawer.vue
index 3fd5cad76..d9986fb5b 100644
--- a/launcher/src/components/UI/edit-page/components/drawer/ServicesDrawer.vue
+++ b/launcher/src/components/UI/edit-page/components/drawer/ServicesDrawer.vue
@@ -2,14 +2,11 @@
   <div
     class="w-full h-full col-start-1 col-span-full row-start-1 row-span-full grid grid-cols-6 grid-rows-15 items-center gap-y-1 bg-[#292e32] p-1 rounded-md"
   >
-    <span
-      class="col-start-1 col-span-full row-start-1 row-span-1 text-xs text-center text-gray-100 font-sans uppercase"
-      >{{ t("multiServer.addConfServ") }}</span
-    >
+    <span class="col-start-1 col-span-full row-start-1 row-span-1 text-xs text-center text-gray-100 font-sans uppercase">{{
+      t("multiServer.addConfServ")
+    }}</span>
     <DrawerFilter />
-    <div
-      class="h-7 col-start-1 col-span-full row-start-3 row-span-1 mb-1 self-end flex justify-start items-center relative"
-    >
+    <div class="h-7 col-start-1 col-span-full row-start-3 row-span-1 mb-1 self-end flex justify-start items-center relative">
       <label for="Search" class="sr-only"> {{ t("multiServer.serch") }} </label>
 
       <input
@@ -24,14 +21,7 @@
         <button type="button" class="text-gray-600 hover:text-gray-700">
           <span class="sr-only">{{ t("multiServer.serch") }} </span>
 
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            class="h-4 w-4"
-          >
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4 w-4">
             <path
               stroke-linecap="round"
               stroke-linejoin="round"
@@ -54,23 +44,14 @@
         @click="addServices(service)"
         @mouseenter="footerStore.cursorLocation = `${service.name} ${serv}`"
       >
-        <img
-          :src="service.icon"
-          alt="Client Icon"
-          class="col-start-1 col-span-1 w-full mx-auto"
-        />
-        <span
-          class="col-start-2 col-span-full w-full self-center text-xs text-gray-100 truncate ml-2"
-          >{{ service.name }}</span
-        >
+        <img :src="service.icon" alt="Client Icon" class="col-start-1 col-span-1 w-full mx-auto" />
+        <span class="col-start-2 col-span-full w-full self-center text-xs text-gray-100 truncate ml-2">{{ service.name }}</span>
       </div>
     </div>
     <div
       class="col-start-1 col-span-full row-start-14 row-span-full w-full h-full bg-[#151618] rounded-md flex flex-col justify-between items-center p-1 shadow-sm shadow-black active:shadow-none border border-gray-700"
     >
-      <span class="text-xs text-center text-gray-100 font-sans uppercase mt-1">{{
-        t("multiServer.cstmServ")
-      }}</span>
+      <span class="text-xs text-center text-gray-100 font-sans uppercase mt-1">{{ t("multiServer.cstmServ") }}</span>
 
       <div
         class="w-full h-8 bg-teal-700 rounded-sm text-center p-1 cursor-pointer hover:bg-teal-900 transition-all duration-100"
diff --git a/launcher/src/components/UI/node-page/sections/ExpertWindow.vue b/launcher/src/components/UI/node-page/sections/ExpertWindow.vue
index 99823fc24..c2a16a5d6 100755
--- a/launcher/src/components/UI/node-page/sections/ExpertWindow.vue
+++ b/launcher/src/components/UI/node-page/sections/ExpertWindow.vue
@@ -12,9 +12,7 @@
       role="dialog"
       aria-modal="true"
     >
-      <div
-        class="flex flex-col justify-start items-start w-full border-b pb-1 border-gray-600"
-      >
+      <div class="flex flex-col justify-start items-start w-full border-b pb-1 border-gray-600">
         <span class="text-xl text-gray-200 font-bold uppercase">{{ item.name }}</span>
         <p class="text-sm text-gray-200 capitalize">
           {{ item.category }}
@@ -22,98 +20,49 @@
         </p>
         <span class="text-sm text-gray-200">ID: {{ item.config.serviceID }}</span>
       </div>
-      <div
-        class="w-full h-[30px] space-y-2 mt-2"
-        :class="{ shorterRowBox: isExpertModeActive }"
-      >
+      <div class="w-full h-[30px] space-y-2 mt-2" :class="{ shorterRowBox: isExpertModeActive }">
         <!-- expert mode row -->
         <div
-          v-if="
-            !ssvExpertModeActive && !ssvDkgExpertModeActive && !prometheusExpertModeActive
-          "
+          v-if="!ssvExpertModeActive && !ssvDkgExpertModeActive && !prometheusExpertModeActive"
           class="dataTitleBox w-full h-10 bg-[#242529] rounded-xl shadow-2xl text-gray-300"
           @click="openExpertMode"
         >
-          <img
-            class="titleIcon"
-            src="/img/icon/service-setting-icons/crown.png"
-            alt="icon"
-          />
+          <img class="titleIcon" src="/img/icon/service-setting-icons/crown.png" alt="icon" />
 
-          <span
-            class="col-start-2 col-span-4 row-start-1 row-span-2 justify-start items-center flex w-full h-full"
-            >Expert Mode</span
-          >
-          <div
-            class="arrow-box col-start-12 col-span-1 row-start-1 row-span-2 justify-end items-center flex w-full h-full"
-          >
-            <img
-              v-if="isExpertModeActive"
-              src="/img/icon/task-manager-icons/up.png"
-              alt=""
-            />
+          <span class="col-start-2 col-span-4 row-start-1 row-span-2 justify-start items-center flex w-full h-full">Expert Mode</span>
+          <div class="arrow-box col-start-12 col-span-1 row-start-1 row-span-2 justify-end items-center flex w-full h-full">
+            <img v-if="isExpertModeActive" src="/img/icon/task-manager-icons/up.png" alt="" />
             <img v-else src="/img/icon/task-manager-icons/down.png" alt="" />
           </div>
         </div>
 
         <template v-if="selectedSetup.network !== 'devnet'">
           <div
-            v-if="
-              item.service === 'SSVNetworkService' &&
-              !isExpertModeActive &&
-              !prometheusExpertModeActive
-            "
+            v-if="item.service === 'SSVNetworkService' && !isExpertModeActive && !prometheusExpertModeActive"
             class="dataTitleBox w-full h-10 bg-[#242529] rounded-xl shadow-2xl text-gray-300"
             @click="openSSVExpertMode"
           >
-            <img
-              class="titleIcon"
-              src="/img/icon/service-setting-icons/ssv-config.png"
-              alt="icon"
-            />
-            <span
-              class="col-start-2 col-span-4 row-start-1 row-span-2 justify-start items-center flex w-full h-full"
+            <img class="titleIcon" src="/img/icon/service-setting-icons/ssv-config.png" alt="icon" />
+            <span class="col-start-2 col-span-4 row-start-1 row-span-2 justify-start items-center flex w-full h-full"
               >SSV Configuration</span
             >
-            <div
-              class="arrow-box col-start-12 col-span-1 row-start-1 row-span-2 justify-end items-center flex w-full h-full"
-            >
-              <img
-                v-if="ssvExpertModeActive"
-                src="/img/icon/task-manager-icons/up.png"
-                alt=""
-              />
+            <div class="arrow-box col-start-12 col-span-1 row-start-1 row-span-2 justify-end items-center flex w-full h-full">
+              <img v-if="ssvExpertModeActive" src="/img/icon/task-manager-icons/up.png" alt="" />
               <img v-else src="/img/icon/task-manager-icons/down.png" alt="" />
             </div>
           </div>
           <!-- DKG START -->
           <div
-            v-if="
-              item.service === 'SSVDKGService' &&
-              !ssvExpertModeActive &&
-              !isExpertModeActive &&
-              !prometheusExpertModeActive
-            "
+            v-if="item.service === 'SSVDKGService' && !ssvExpertModeActive && !isExpertModeActive && !prometheusExpertModeActive"
             class="dataTitleBox w-full h-10 bg-[#242529] rounded-xl shadow-2xl text-gray-300"
             @click="openSSVDKGExpertMode"
           >
-            <img
-              class="titleIcon"
-              src="/img/icon/service-setting-icons/ssv-config.png"
-              alt="icon"
-            />
-            <span
-              class="col-start-2 col-span-4 row-start-1 row-span-2 justify-start items-center flex w-full h-full"
+            <img class="titleIcon" src="/img/icon/service-setting-icons/ssv-config.png" alt="icon" />
+            <span class="col-start-2 col-span-4 row-start-1 row-span-2 justify-start items-center flex w-full h-full"
               >SSV DKG Configuration</span
             >
-            <div
-              class="arrow-box col-start-12 col-span-1 row-start-1 row-span-2 justify-end items-center flex w-full h-full"
-            >
-              <img
-                v-if="ssvDkgExpertModeActive"
-                src="/img/icon/task-manager-icons/up.png"
-                alt=""
-              />
+            <div class="arrow-box col-start-12 col-span-1 row-start-1 row-span-2 justify-end items-center flex w-full h-full">
+              <img v-if="ssvDkgExpertModeActive" src="/img/icon/task-manager-icons/up.png" alt="" />
               <img v-else src="/img/icon/task-manager-icons/down.png" alt="" />
             </div>
           </div>
@@ -123,18 +72,11 @@
             class="dataTitleBox w-full h-10 bg-[#242529] rounded-xl shadow-2xl text-gray-300"
             @click="openPrometheusExpertMode"
           >
-            <span
-              class="col-start-2 col-span-4 row-start-1 row-span-2 justify-start items-center flex w-full h-full"
+            <span class="col-start-2 col-span-4 row-start-1 row-span-2 justify-start items-center flex w-full h-full"
               >Prometheus Configuration</span
             >
-            <div
-              class="arrow-box col-start-12 col-span-1 row-start-1 row-span-2 justify-end items-center flex w-full h-full"
-            >
-              <img
-                v-if="prometheusExpertModeActive"
-                src="/img/icon/task-manager-icons/up.png"
-                alt=""
-              />
+            <div class="arrow-box col-start-12 col-span-1 row-start-1 row-span-2 justify-end items-center flex w-full h-full">
+              <img v-if="prometheusExpertModeActive" src="/img/icon/task-manager-icons/up.png" alt="" />
               <img v-else src="/img/icon/task-manager-icons/down.png" alt="" />
             </div>
           </div>
@@ -150,57 +92,36 @@
           }
         -->
           <div
-            v-for="(option, index) in item.expertOptions.filter(
-              (option) => option.type === 'select'
-            )"
+            v-for="(option, index) in item.expertOptions.filter((option) => option.type === 'select')"
             :key="index"
             class="selectBox w-full h-10 bg-[#242529] rounded-xl shadow-2xl text-gray-300"
             :class="{
-              invisible:
-                isExpertModeActive ||
-                ssvExpertModeActive ||
-                ssvDkgExpertModeActive ||
-                prometheusExpertModeActive,
+              invisible: isExpertModeActive || ssvExpertModeActive || ssvDkgExpertModeActive || prometheusExpertModeActive,
             }"
           >
             <img class="titleIcon" :src="option.icon" alt="icon" />
-            <span
-              class="col-start-2 col-span-4 row-start-1 row-span-2 justify-start items-center flex w-full h-full"
-              >{{ option.title }}</span
-            >
+            <span class="col-start-2 col-span-4 row-start-1 row-span-2 justify-start items-center flex w-full h-full">{{
+              option.title
+            }}</span>
 
-            <select
-              id="value"
-              v-model="option.changeValue"
-              class="toggleTextInput"
-              @change="somethingIsChanged(option)"
-            >
-              <option v-for="(rate, idx) in option.value" :key="idx" :value="rate">
-                {{ rate }} {{ option.unit }}
-              </option>
+            <select id="value" v-model="option.changeValue" class="toggleTextInput" @change="somethingIsChanged(option)">
+              <option v-for="(rate, idx) in option.value" :key="idx" :value="rate">{{ rate }} {{ option.unit }}</option>
             </select>
           </div>
 
           <!-- Fee recipient -->
           <div
-            v-for="(option, index) in item.expertOptions.filter(
-              (option) => option.type === 'text'
-            )"
+            v-for="(option, index) in item.expertOptions.filter((option) => option.type === 'text')"
             :key="index"
             class="toggleTextBox w-full h-10 bg-[#242529] rounded-xl shadow-2xl text-gray-300"
             :class="{
-              invisible:
-                isExpertModeActive ||
-                ssvExpertModeActive ||
-                ssvDkgExpertModeActive ||
-                prometheusExpertModeActive,
+              invisible: isExpertModeActive || ssvExpertModeActive || ssvDkgExpertModeActive || prometheusExpertModeActive,
             }"
           >
             <img class="titleIcon" :src="option.icon" alt="icon" />
-            <span
-              class="col-start-2 col-span-4 row-start-1 row-span-2 justify-start items-center flex w-full h-full"
-              >{{ option.title }}</span
-            >
+            <span class="col-start-2 col-span-4 row-start-1 row-span-2 justify-start items-center flex w-full h-full">{{
+              option.title
+            }}</span>
             <!-- <Transition name="slide-up">
             <img
               v-if="option.buttonState"
@@ -217,12 +138,7 @@
               @click="buttonOn(option)"
             />
           </Transition> -->
-            <input
-              v-model="option.changeValue"
-              class="toggleTextInput"
-              type="text"
-              @input="somethingIsChanged(option)"
-            />
+            <input v-model="option.changeValue" class="toggleTextInput" type="text" @input="somethingIsChanged(option)" />
           </div>
 
           <!--
@@ -235,24 +151,16 @@
         -->
           <!-- toggle btn -->
           <div
-            v-for="(option, index) in item.expertOptions.filter(
-              (option) => option.type === 'action'
-            )"
+            v-for="(option, index) in item.expertOptions.filter((option) => option.type === 'action')"
             :key="index"
             class="actionBox w-full h-10 bg-[#242529] rounded-xl shadow-2xl text-gray-300"
             :class="{
-              invisible:
-                isExpertModeActive ||
-                ssvExpertModeActive ||
-                ssvDkgExpertModeActive ||
-                prometheusExpertModeActive,
+              invisible: isExpertModeActive || ssvExpertModeActive || ssvDkgExpertModeActive || prometheusExpertModeActive,
             }"
           >
             <img class="titleIcon justify-self-center" :src="option.icon" alt="icon" />
             <span class="actionBoxTitle">{{ option.title }}</span>
-            <div
-              class="w-full flex justify-end items-center col-start-12 col-span-1 row-start-1 row-span-1"
-            >
+            <div class="w-full flex justify-end items-center col-start-12 col-span-1 row-start-1 row-span-1">
               <label class="relative inline-flex items-center cursor-pointer">
                 <input
                   v-model="option.changeValue"
@@ -271,27 +179,18 @@
           </div>
           <!-- toggle btn -->
           <div
-            v-for="(option, index) in item.expertOptions.filter(
-              (option) => option.type === 'toggle'
-            )"
+            v-for="(option, index) in item.expertOptions.filter((option) => option.type === 'toggle')"
             :key="index"
             class="actionBox w-full h-10 bg-[#242529] rounded-xl shadow-2xl text-gray-300"
             :class="{
-              invisible:
-                isExpertModeActive ||
-                ssvExpertModeActive ||
-                ssvDkgExpertModeActive ||
-                prometheusExpertModeActive,
+              invisible: isExpertModeActive || ssvExpertModeActive || ssvDkgExpertModeActive || prometheusExpertModeActive,
             }"
           >
             <img class="titleIcon" :src="option.icon" alt="icon" />
-            <span
-              class="col-start-2 col-span-4 row-start-1 row-span-2 justify-start items-center flex w-full h-full"
-              >{{ option.title }}</span
-            >
-            <div
-              class="col-start-12 col-span-1 row-start-1 row-span-1 w-full flex justify-end items-center"
-            >
+            <span class="col-start-2 col-span-4 row-start-1 row-span-2 justify-start items-center flex w-full h-full">{{
+              option.title
+            }}</span>
+            <div class="col-start-12 col-span-1 row-start-1 row-span-1 w-full flex justify-end items-center">
               <label class="relative inline-flex items-center cursor-pointer">
                 <input
                   v-model="option.changeValue"
@@ -314,11 +213,7 @@
       <div
         class="expertTable"
         :class="{
-          showExpertTable:
-            isExpertModeActive ||
-            ssvExpertModeActive ||
-            ssvDkgExpertModeActive ||
-            prometheusExpertModeActive,
+          showExpertTable: isExpertModeActive || ssvExpertModeActive || ssvDkgExpertModeActive || prometheusExpertModeActive,
         }"
       >
         <div v-if="isExpertModeActive" class="expertMode">
@@ -373,10 +268,7 @@
           Confirm
         </button>
 
-        <button
-          v-else
-          class="w-[100px] h-8 px-4 py-1 font-medium tracking-wide text-white rounded-sm disabled uppercase text-sm"
-        >
+        <button v-else class="w-[100px] h-8 px-4 py-1 font-medium tracking-wide text-white rounded-sm disabled uppercase text-sm">
           <span>Confirm</span>
         </button>
         <button
@@ -386,10 +278,7 @@
         >
           Confirm & Restart
         </button>
-        <button
-          v-else
-          class="w-[200px] h-8 px-6 py-1 font-medium tracking-wide text-white uppercase rounded-sm disabled text-sm"
-        >
+        <button v-else class="w-[200px] h-8 px-6 py-1 font-medium tracking-wide text-white uppercase rounded-sm disabled text-sm">
           <span>Confirm & Restart</span>
         </button>
       </div>
@@ -460,8 +349,7 @@ export default {
   methods: {
     openDocs(docsUrl) {
       window.open(docsUrl, "_blank");
-      if (this.selectedSetup.network === "gnosis")
-        window.open("https://docs.gnosischain.com/node/", "_blank");
+      if (this.selectedSetup.network === "gnosis") window.open("https://docs.gnosischain.com/node/", "_blank");
     },
 
     somethingIsChanged(item) {
@@ -474,25 +362,17 @@ export default {
 
       let tekuGasLimit = "";
       if (this.item.service === "TekuValidatorService") {
-        tekuGasLimit = await ControlService.readGasConfigFile(
-          this.item.config.volumes[0].destinationPath
-        );
+        tekuGasLimit = await ControlService.readGasConfigFile(this.item.config.volumes[0].destinationPath);
       }
 
       if (this.item.service === "SSVNetworkService") {
-        this.item.ssvConfig = await ControlService.readSSVNetworkConfig(
-          this.item.config.serviceID
-        );
+        this.item.ssvConfig = await ControlService.readSSVNetworkConfig(this.item.config.serviceID);
       }
       if (this.item.service === "SSVDKGService") {
-        this.item.ssvDkgConfig = await ControlService.readSSVDKGConfig(
-          this.item.config.serviceID
-        );
+        this.item.ssvDkgConfig = await ControlService.readSSVDKGConfig(this.item.config.serviceID);
       }
       if (this.item.service === "PrometheusService") {
-        this.item.prometheusConfig = await ControlService.readPrometheusConfig(
-          this.item.config.serviceID
-        );
+        this.item.prometheusConfig = await ControlService.readPrometheusConfig(this.item.config.serviceID);
         this.prometheusConfig = this.item.prometheusConfig;
       }
       this.item.expertOptions = this.item.expertOptions.map((option) => {
@@ -508,10 +388,7 @@ export default {
               if (this.item.yaml.includes(command)) {
                 let match = this.item.yaml.match(new RegExp(`${command}[:=]?([\\S*]*)`));
                 option.changeValue = match ? match[match.length - 1] : "";
-              } else if (
-                this.item.service === "TekuValidatorService" &&
-                command == "--gas-limit"
-              ) {
+              } else if (this.item.service === "TekuValidatorService" && command == "--gas-limit") {
                 if (tekuGasLimit != null) {
                   tekuGasLimit = tekuGasLimit.replace(/"/g, "");
                 }
@@ -526,9 +403,7 @@ export default {
           case "toggle": {
             option.commands.forEach((command) => {
               if (this.item.yaml.includes(command)) {
-                let match = this.item.yaml.match(
-                  new RegExp(`${command}([=]?)([\\S*]+)?`)
-                );
+                let match = this.item.yaml.match(new RegExp(`${command}([=]?)([\\S*]+)?`));
                 if (match[1] == "=") {
                   option.changeValue = match[2] === "true" ? true : false;
                 } else {
@@ -550,10 +425,7 @@ export default {
     },
 
     async writeService() {
-      this.item.yaml = this.item.yaml.replace(
-        new RegExp("(autoupdate: )(.*)(\\n)"),
-        "$1" + this.checkAutoUpdate() + "$3"
-      );
+      this.item.yaml = this.item.yaml.replace(new RegExp("(autoupdate: )(.*)(\\n)"), "$1" + this.checkAutoUpdate() + "$3");
 
       this.item.expertOptions.forEach((option) => {
         if (option.changed) {
@@ -561,10 +433,7 @@ export default {
             case "select": {
               option.commands.forEach((command) => {
                 if (option.changeValue && this.item.yaml.includes(command)) {
-                  this.item.yaml = this.item.yaml.replace(
-                    new RegExp(option.pattern[0]),
-                    `$1${option.changeValue}$3`
-                  );
+                  this.item.yaml = this.item.yaml.replace(new RegExp(option.pattern[0]), `$1${option.changeValue}$3`);
                 }
               });
               break;
@@ -573,39 +442,23 @@ export default {
             case "toggle": {
               option.commands.forEach((command) => {
                 if (this.item.yaml.includes(command)) {
-                  let match = this.item.yaml.match(
-                    new RegExp(`${command}([=]?)([\\S*]+)?`)
-                  );
+                  let match = this.item.yaml.match(new RegExp(`${command}([=]?)([\\S*]+)?`));
                   if (match[1] == "=") {
-                    this.item.yaml = this.item.yaml.replace(
-                      new RegExp(match[0]),
-                      command + "=" + (option.changeValue ? "true" : "false")
-                    );
+                    this.item.yaml = this.item.yaml.replace(new RegExp(match[0]), command + "=" + (option.changeValue ? "true" : "false"));
                   } else {
                     if (option.changeValue == false) {
-                      this.item.yaml = this.item.yaml.replace(
-                        new RegExp(`\n.*${command}.*`),
-                        ""
-                      );
+                      this.item.yaml = this.item.yaml.replace(new RegExp(`\n.*${command}.*`), "");
                     }
                   }
-                } else if (
-                  option.changeValue == true &&
-                  !this.item.yaml.includes(command)
-                ) {
+                } else if (option.changeValue == true && !this.item.yaml.includes(command)) {
                   const matchAllCommands = this.item.yaml.match(new RegExp(/--[\S]+/gm));
                   const lastCommand = matchAllCommands[matchAllCommands.length - 1];
-                  const matchSpaces = this.item.yaml.match(
-                    new RegExp(`(\\s*- )${lastCommand}`)
-                  );
+                  const matchSpaces = this.item.yaml.match(new RegExp(`(\\s*- )${lastCommand}`));
                   let spaces = " ";
                   if (matchSpaces) {
                     spaces = matchSpaces[1];
                   }
-                  this.item.yaml = this.item.yaml.replace(
-                    new RegExp(`${lastCommand}`),
-                    lastCommand + spaces + command
-                  );
+                  this.item.yaml = this.item.yaml.replace(new RegExp(`${lastCommand}`), lastCommand + spaces + command);
                 }
               });
               break;
@@ -615,14 +468,10 @@ export default {
               option.commands.forEach((command) => {
                 if (option.changeValue && this.item.yaml.includes(command)) {
                   if (option.needsPortForwarding) {
-                    const matchCurrentValue = this.item.yaml.match(
-                      new RegExp(`${command}([=]?)([\\S*]*)`)
-                    );
+                    const matchCurrentValue = this.item.yaml.match(new RegExp(`${command}([=]?)([\\S*]*)`));
                     const currentValue = matchCurrentValue[2];
                     const matchPortForwardings = this.item.yaml.match(
-                      new RegExp(
-                        /ports:([\s]*- \d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}:\d{1,5}:\d{1,5}(\/[tcpudp]*)?)*/gm
-                      )
+                      new RegExp(/ports:([\s]*- \d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}:\d{1,5}:\d{1,5}(\/[tcpudp]*)?)*/gm)
                     );
                     let portForwardings = matchPortForwardings[0].split("\n");
                     portForwardings.shift();
@@ -631,9 +480,7 @@ export default {
                         new RegExp(`:\\d{1,5}:${currentValue}(\\/[tcpudp]*)?`).test(pf)
                       );
                       const allreadyExists = portForwardings.filter((pf) =>
-                        new RegExp(`:\\d{1,5}:${option.changeValue}(\\/[tcpudp]*)?`).test(
-                          pf
-                        )
+                        new RegExp(`:\\d{1,5}:${option.changeValue}(\\/[tcpudp]*)?`).test(pf)
                       );
                       if (existingPortForwarding) {
                         const portObj = this.getPortObject(existingPortForwarding);
@@ -644,9 +491,7 @@ export default {
                             option.changeValue +
                             ":" +
                             option.changeValue +
-                            (portObj.servicePortProtocol
-                              ? "/" + portObj.servicePortProtocol
-                              : "")
+                            (portObj.servicePortProtocol ? "/" + portObj.servicePortProtocol : "")
                         );
                       } else if (allreadyExists.length === 0) {
                         const firstPortForwarding = portForwardings[0];
@@ -667,17 +512,12 @@ export default {
                   if (!/^["'`].*["'`]$/.test(option.changeValue) && option.isENV) {
                     option.changeValue = `"${option.changeValue}"`;
                   }
-                  this.item.yaml = this.item.yaml.replace(
-                    new RegExp(`${command}([=]?)([\\S*]*)`),
-                    `${command}$1${option.changeValue}`
-                  );
+                  this.item.yaml = this.item.yaml.replace(new RegExp(`${command}([=]?)([\\S*]*)`), `${command}$1${option.changeValue}`);
                 } else if (option.changeValue && !this.item.yaml.includes(command)) {
                   let matchAllCommands = this.item.yaml.match(new RegExp(/--[\S]+/gm));
                   if (matchAllCommands) {
                     const lastCommand = matchAllCommands[matchAllCommands.length - 1];
-                    const matchSpaces = this.item.yaml.match(
-                      new RegExp(`(\\s*- )${lastCommand}`)
-                    );
+                    const matchSpaces = this.item.yaml.match(new RegExp(`(\\s*- )${lastCommand}`));
                     let spaces = " ";
                     if (matchSpaces) {
                       spaces = matchSpaces[1];
@@ -685,9 +525,7 @@ export default {
 
                     this.item.yaml = this.item.yaml.replace(
                       new RegExp(`${lastCommand}`),
-                      `${lastCommand}${spaces}${command}${option.noEqualSign ? "" : "="}${
-                        option.changeValue
-                      }`
+                      `${lastCommand}${spaces}${command}${option.noEqualSign ? "" : "="}${option.changeValue}`
                     );
                   } else {
                     const matchENV = this.item.yaml.match(/env:([\s]+)/);
@@ -697,10 +535,7 @@ export default {
                     );
                   }
                 } else if (!option.changeValue && this.item.yaml.includes(command)) {
-                  this.item.yaml = this.item.yaml.replace(
-                    new RegExp(`\n.*${command}.*`),
-                    ""
-                  );
+                  this.item.yaml = this.item.yaml.replace(new RegExp(`\n.*${command}.*`), "");
                 }
               });
               break;
@@ -720,10 +555,7 @@ export default {
           serviceID: this.item.config.serviceID,
           config: this.item.ssvDkgConfig,
         });
-      if (
-        this.item.service === "PrometheusService" &&
-        this.item.prometheusConfig != this.prometheusConfig
-      ) {
+      if (this.item.service === "PrometheusService" && this.item.prometheusConfig != this.prometheusConfig) {
         if (!this.item.yaml.includes("overwrite: false")) {
           this.item.yaml = this.item.yaml.trim() + "\noverwrite: false";
         }
@@ -742,24 +574,14 @@ export default {
           if (!this.item.yaml.includes("validators-proposer-config")) {
             this.item.yaml = this.item.yaml.replace(
               /^.*--gas-limit.*$/gm,
-              "  - --validators-proposer-config=" +
-                this.item.config.volumes[0].servicePath +
-                "/gas_config.json"
+              "  - --validators-proposer-config=" + this.item.config.volumes[0].servicePath + "/gas_config.json"
             );
           } else {
             this.item.yaml = this.item.yaml.replace(/\n^.*--gas-limit.*$/gm, "");
           }
-        } else if (
-          !this.item.yaml.includes("--gas-limit") &&
-          this.item.yaml.includes("validators-proposer-config")
-        ) {
-          await ControlService.removeGasConfigFile(
-            this.item.config.volumes[0].destinationPath
-          );
-          this.item.yaml = this.item.yaml.replace(
-            new RegExp(/\n^.*validators-proposer-config.*$/gm),
-            ""
-          );
+        } else if (!this.item.yaml.includes("--gas-limit") && this.item.yaml.includes("validators-proposer-config")) {
+          await ControlService.removeGasConfigFile(this.item.config.volumes[0].destinationPath);
+          this.item.yaml = this.item.yaml.replace(new RegExp(/\n^.*validators-proposer-config.*$/gm), "");
         }
       }
 
@@ -776,8 +598,7 @@ export default {
       const destinationIp = portSettings?.length >= 1 ? portSettings[0] : "";
       const destinationPort = portSettings?.length >= 2 ? portSettings[1] : "";
       const servicePort = servicePortSettings?.length >= 1 ? servicePortSettings[0] : "";
-      const servicePortProtocol =
-        servicePortSettings?.length >= 2 ? servicePortSettings[1] : "";
+      const servicePortProtocol = servicePortSettings?.length >= 2 ? servicePortSettings[1] : "";
 
       return { destinationIp, destinationPort, servicePort, servicePortProtocol };
     },
diff --git a/launcher/src/components/UI/the-control/AmsterdamComponent.vue b/launcher/src/components/UI/the-control/AmsterdamComponent.vue
index 95225af9d..5e08387b3 100755
--- a/launcher/src/components/UI/the-control/AmsterdamComponent.vue
+++ b/launcher/src/components/UI/the-control/AmsterdamComponent.vue
@@ -1,10 +1,6 @@
 <template>
   <div class="amsterdam-parent">
-    <div
-      class="icoTitle"
-      @mouseenter="cursorLocation = `${footerInfo} ${getSetupNetwork?.name}`"
-      @mouseleave="cursorLocation = ''"
-    >
+    <div class="icoTitle" @mouseenter="cursorLocation = `${footerInfo} ${getSetupNetwork?.name}`" @mouseleave="cursorLocation = ''">
       <div class="icoContainer">
         <img :src="getSetupNetwork?.icon" />
       </div>
@@ -19,12 +15,7 @@
         </div>
       </div>
       <no-data
-        v-else-if="
-          isConsensusMissing ||
-          !isConsensusRunning ||
-          prometheusIsOff ||
-          selectedSetup?.network === 'devnet'
-        "
+        v-else-if="isConsensusMissing || !isConsensusRunning || prometheusIsOff || selectedSetup?.network === 'devnet'"
         @mouseenter="cursorLocation = `${nodataMessage}`"
         @mouseleave="cursorLocation = ''"
       />
@@ -41,9 +32,9 @@
                 red: n.slotStatus == 'missed',
               }"
               @mouseenter="
-                cursorLocation = `the current epoch: ${
-                  currentResult?.currentEpoch || 'N/A'
-                } and the slot number is ${n.slotNumber === 0 ? 'N/A' : n.slotNumber}`
+                cursorLocation = `the current epoch: ${currentResult?.currentEpoch || 'N/A'} and the slot number is ${
+                  n.slotNumber === 0 ? 'N/A' : n.slotNumber
+                }`
               "
               @mouseleave="cursorLocation = ''"
             ></div>
@@ -61,9 +52,9 @@
                 red: n.slotStatus == 'missed',
               }"
               @mouseenter="
-                cursorLocation = `the justified epoch: ${
-                  currentResult?.currentJustifiedEpoch || 'N/A'
-                } and the slot number is ${n.slotNumber}`
+                cursorLocation = `the justified epoch: ${currentResult?.currentJustifiedEpoch || 'N/A'} and the slot number is ${
+                  n.slotNumber
+                }`
               "
               @mouseleave="cursorLocation = ''"
             ></div>
@@ -79,9 +70,9 @@
                 red: n.slotStatus == 'missed',
               }"
               @mouseenter="
-                cursorLocation = `the previous justified epoch: ${
-                  currentResult?.previousJustifiedEpoch || 'N/A'
-                } and the slot number is ${n.slotNumber}`
+                cursorLocation = `the previous justified epoch: ${currentResult?.previousJustifiedEpoch || 'N/A'} and the slot number is ${
+                  n.slotNumber
+                }`
               "
               @mouseleave="cursorLocation = ''"
             ></div>
@@ -99,9 +90,7 @@
                 red: n.slotStatus == 'missed',
               }"
               @mouseenter="
-                cursorLocation = `the Finalized epoch: ${
-                  currentResult?.finalizedEpoch || 'N/A'
-                } and the slot number is ${n.slotNumber}`
+                cursorLocation = `the Finalized epoch: ${currentResult?.finalizedEpoch || 'N/A'} and the slot number is ${n.slotNumber}`
               "
               @mouseleave="cursorLocation = ''"
             ></div>
@@ -263,17 +252,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" });
@@ -287,10 +270,7 @@ export default {
           if (this.selectedSetup?.network === "gnosis" && this.changeCounter === 4) {
             this.networkFlag = false;
             this.changeCounter = 0;
-          } else if (
-            this.selectedSetup?.network !== "gnosis" &&
-            this.changeCounter === 2
-          ) {
+          } else if (this.selectedSetup?.network !== "gnosis" && this.changeCounter === 2) {
             this.networkFlag = false;
             this.changeCounter = 0;
           }
@@ -342,17 +322,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/ControlAlert.vue b/launcher/src/components/UI/the-control/ControlAlert.vue
index 1f0da4fc5..51f7782b8 100755
--- a/launcher/src/components/UI/the-control/ControlAlert.vue
+++ b/launcher/src/components/UI/the-control/ControlAlert.vue
@@ -2,9 +2,7 @@
   <div class="alert-box_parent">
     <div class="alert-box">
       <div class="alert-box_header h-8 w-full flex justify-center items-center">
-        <div
-          class="alert-box_icons border border-gray-600 rounded-md bg-[#151618] w-3/4 h-full flex justify-start items-center pt-0.5"
-        >
+        <div class="alert-box_icons border border-gray-600 rounded-md bg-[#151618] w-3/4 h-full flex justify-start items-center pt-0.5">
           <div
             class="icon_alarm"
             :class="{
@@ -36,11 +34,7 @@
         <div class="status-box_vol-state w-1/4 h-full flex justify-center items-center">
           <div class="volBtn cursor-pointer w-8" @click="volToggle">
             <img
-              :src="
-                volState
-                  ? '/img/icon/node-alert-icons/alert-settings.png'
-                  : '/img/icon/node-alert-icons/alert-settings-mute.png'
-              "
+              :src="volState ? '/img/icon/node-alert-icons/alert-settings.png' : '/img/icon/node-alert-icons/alert-settings-mute.png'"
               alt="green"
             />
           </div>
@@ -54,10 +48,7 @@
           @mouseleave="cursorLocation = ''"
         >
           <div class="icon-box">
-            <img
-              src="/img/icon/node-alert-icons/alert-storage-yellow.png"
-              alt="warn_storage"
-            />
+            <img src="/img/icon/node-alert-icons/alert-storage-yellow.png" alt="warn_storage" />
           </div>
           <div class="message">
             <div class="main-message">
@@ -73,10 +64,7 @@
           @mouseleave="cursorLocation = ''"
         >
           <div class="icon-box">
-            <img
-              src="/img/icon/node-alert-icons/alert-cpu-yellow.png"
-              alt="warn_storage"
-            />
+            <img src="/img/icon/node-alert-icons/alert-cpu-yellow.png" alt="warn_storage" />
           </div>
           <div class="message">
             <div class="main-message">
@@ -90,10 +78,7 @@
         <template v-if="pointStatus && !alertShowState.includes('yellow')">
           <div v-for="point in pointStatus" :key="point" class="alert-message_yellow">
             <div class="icon-box">
-              <img
-                src="/img/icon/control-page-icons/PORT_LIST_ICON.png"
-                alt="warn_storage"
-              />
+              <img src="/img/icon/control-page-icons/PORT_LIST_ICON.png" alt="warn_storage" />
             </div>
             <div class="message">
               <div class="main-message">
@@ -133,10 +118,7 @@
             @mouseleave="cursorLocation = ''"
           >
             <div class="icon-box">
-              <img
-                src="/img/icon/service-icons/validator/ObolCharon.png"
-                alt="warn_obol"
-              />
+              <img src="/img/icon/service-icons/validator/ObolCharon.png" alt="warn_obol" />
             </div>
             <div class="message">
               <div class="main-message">
@@ -160,10 +142,7 @@
             @mouseleave="cursorLocation = ''"
           >
             <div class="icon-box">
-              <img
-                src="/img/icon/service-icons/validator/ObolCharon.png"
-                alt="warn_obol"
-              />
+              <img src="/img/icon/service-icons/validator/ObolCharon.png" alt="warn_obol" />
             </div>
             <div class="message">
               <div class="main-message text-gray-900">
@@ -232,10 +211,7 @@
           @mouseleave="cursorLocation = ''"
         >
           <div class="icon-box">
-            <img
-              src="/img/icon/node-alert-icons/alert-sync-error.gif"
-              alt="warn_storage"
-            />
+            <img src="/img/icon/node-alert-icons/alert-sync-error.gif" alt="warn_storage" />
           </div>
           <div class="message">
             <div class="main-message"><span>CLIENT / SERVICE</span></div>
@@ -252,10 +228,7 @@
           @mouseleave="cursorLocation = ''"
         >
           <div class="icon-box">
-            <img
-              src="/img/icon/node-alert-icons/alert-task-error.png"
-              alt="warn_storage"
-            />
+            <img src="/img/icon/node-alert-icons/alert-task-error.png" alt="warn_storage" />
           </div>
 
           <div class="message">
@@ -286,19 +259,13 @@
         </template>
 
         <div
-          v-if="
-            stereumUpdate.current !== stereumUpdate.version &&
-            !alertShowState.includes('green')
-          "
+          v-if="stereumUpdate.current !== stereumUpdate.version && !alertShowState.includes('green')"
           class="alert-message_green"
           @mouseenter="cursorLocation = `${clkUpdate}`"
           @mouseleave="cursorLocation = ''"
         >
           <div class="icon-box" @click="showUpdate">
-            <img
-              src="/img/icon/node-alert-icons/alert-notification-stereum-update.png"
-              alt="warn_storage"
-            />
+            <img src="/img/icon/node-alert-icons/alert-notification-stereum-update.png" alt="warn_storage" />
           </div>
           <div class="message">
             <div class="main-message" @click="showUpdate">
@@ -424,9 +391,7 @@ export default {
     },
     updatedNewUpdates() {
       const updatedUpdates = this.newUpdates.map((update) => {
-        const matchingService = this.installedServices.find(
-          (service) => service.name === update.name
-        );
+        const matchingService = this.installedServices.find((service) => service.name === update.name);
         if (matchingService) {
           return {
             ...update,
@@ -517,13 +482,9 @@ export default {
       }
     },
     processCsm(alerts) {
-      const criticalAlertNames = alerts
-        .filter((alert) => alert.level === "critical")
-        .map((alert) => alert.name);
+      const criticalAlertNames = alerts.filter((alert) => alert.level === "critical").map((alert) => alert.name);
 
-      const notifictionsNames = alerts
-        .filter((alert) => alert.level === "notification")
-        .map((alert) => alert.name);
+      const notifictionsNames = alerts.filter((alert) => alert.level === "notification").map((alert) => alert.name);
 
       this.criticalCsm = criticalAlertNames;
 
@@ -555,13 +516,9 @@ export default {
       }
     },
     processAlerts(alerts) {
-      const criticalAlertNames = alerts
-        .filter((alert) => alert.level === "critical")
-        .map((alert) => alert.name);
+      const criticalAlertNames = alerts.filter((alert) => alert.level === "critical").map((alert) => alert.name);
 
-      const warningAlertNames = alerts
-        .filter((alert) => alert.level === "warning")
-        .map((alert) => alert.name);
+      const warningAlertNames = alerts.filter((alert) => alert.level === "warning").map((alert) => alert.name);
 
       this.criticalObol = criticalAlertNames;
 
@@ -604,9 +561,7 @@ export default {
     },
 
     async readService() {
-      const validators = this.installedServices?.filter(
-        (i) => i.category === "validator"
-      );
+      const validators = this.installedServices?.filter((i) => i.category === "validator");
 
       if (validators && validators.length > 0 && validators[0].config) {
         const addresses = [];
@@ -615,13 +570,8 @@ export default {
           if (validator.name === "ssv.network" || validator.name === "Obol Charon") {
             continue;
           }
-          if (!validator.yaml)
-            validator.yaml = await ControlService.getServiceYAML(
-              validator.config.serviceID
-            );
-          const patternIndex = validator.expertOptions.findIndex(
-            (o) => o.title === "Default Fee Recipient"
-          );
+          if (!validator.yaml) validator.yaml = await ControlService.getServiceYAML(validator.config.serviceID);
+          const patternIndex = validator.expertOptions.findIndex((o) => o.title === "Default Fee Recipient");
           if (patternIndex === -1) {
             continue;
           }
@@ -635,10 +585,7 @@ export default {
             return;
           }
         }
-        const notSetAddresses = addresses.filter(
-          (validator) =>
-            validator.address === "0x0000000000000000000000000000000000000000"
-        );
+        const notSetAddresses = addresses.filter((validator) => validator.address === "0x0000000000000000000000000000000000000000");
         this.notSetAddresses = notSetAddresses;
       }
     },
diff --git a/launcher/src/components/UI/the-control/EpochSlot.vue b/launcher/src/components/UI/the-control/EpochSlot.vue
index 3c167d63b..5b00aabf0 100755
--- a/launcher/src/components/UI/the-control/EpochSlot.vue
+++ b/launcher/src/components/UI/the-control/EpochSlot.vue
@@ -1,10 +1,6 @@
 <template>
   <div class="epockSlot_parent">
-    <NoData
-      v-if="
-        isConsensusMissing || isConsensusRunning || selectedSetup?.network === 'devnet'
-      "
-    />
+    <NoData v-if="isConsensusMissing || isConsensusRunning || selectedSetup?.network === 'devnet'" />
     <div v-else-if="flag" class="wrapper">
       {{ beaconControler }}
     </div>
@@ -71,11 +67,7 @@ export default {
       return "Loading...";
     },
     flag() {
-      if (
-        this.currentResult === undefined ||
-        this.currentResult.beaconStatus === undefined ||
-        this.currentResult.beaconStatus !== 0
-      ) {
+      if (this.currentResult === undefined || this.currentResult.beaconStatus === undefined || this.currentResult.beaconStatus !== 0) {
         return true;
       }
 
diff --git a/launcher/src/components/UI/the-control/TheBalance.vue b/launcher/src/components/UI/the-control/TheBalance.vue
index 71ee8112d..c27badf42 100755
--- a/launcher/src/components/UI/the-control/TheBalance.vue
+++ b/launcher/src/components/UI/the-control/TheBalance.vue
@@ -3,22 +3,13 @@
     <NoData v-if="isConsensusMissing || selectedSetup?.network === 'devnet'" />
     <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>