From b85dda2306b4ad9203d4e47cdeb44b92fe8d0251 Mon Sep 17 00:00:00 2001
From: mabasian <54101509+mabasian@users.noreply.github.com>
Date: Mon, 26 Aug 2024 12:02:00 +0200
Subject: [PATCH] =?UTF-8?q?[Fix]:=20Ensure=20Proper=20Functionality=20of?=
 =?UTF-8?q?=20Header=20Modals=20with=20Multiple=20Ins=E2=80=A6=20(#2007)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* [Fix]: Ensure Proper Functionality of Header Modals with Multiple Instances of the Same Service Installed

fix #1961
fix #1962

* fix: index of header services

* FIX: error handling for slides

* FIX: Ensure MEV Boost Relay list shows correctly with multiSetup

fix #1962
---
 launcher/public/output.css                    | 48 +++--------------
 .../components/services/ServiceBody.vue       | 52 ++++++++++++++++++-
 .../components/modals/MevboostRelays.vue      | 11 ++--
 .../UI/services-modal/MevboostModal.vue       | 12 +++--
 4 files changed, 73 insertions(+), 50 deletions(-)

diff --git a/launcher/public/output.css b/launcher/public/output.css
index c4df8d2db6..6ad9d34d79 100755
--- a/launcher/public/output.css
+++ b/launcher/public/output.css
@@ -987,56 +987,20 @@ video {
   top: 1px;
 }
 
-.top-\[56px\]{
-  top: 56px;
-}
-
-.top-\[7rem\]{
-  top: 7rem;
-}
-
-.bottom-8{
-  bottom: 2rem;
-}
-
-.top-\[-55\%\]{
-  top: -55%;
-}
-
-.top-\[-5rem\]{
-  top: -5rem;
-}
-
-.top-\[-10\%\]{
-  top: -10%;
-}
-
-.top-\[0\%\]{
-  top: 0%;
-}
-
-.top-\[10\%\]{
-  top: 10%;
-}
-
-.top-\[40\%\]{
-  top: 40%;
+.top-\[33\%\]{
+  top: 33%;
 }
 
 .top-\[42\%\]{
   top: 42%;
 }
 
-.top-\[35\%\]{
-  top: 35%;
-}
-
-.top-\[32\%\]{
-  top: 32%;
+.top-\[56px\]{
+  top: 56px;
 }
 
-.top-\[33\%\]{
-  top: 33%;
+.top-\[7rem\]{
+  top: 7rem;
 }
 
 .z-0{
diff --git a/launcher/src/components/UI/base-header/components/services/ServiceBody.vue b/launcher/src/components/UI/base-header/components/services/ServiceBody.vue
index 6aeb9e9d68..b2d0aeb696 100644
--- a/launcher/src/components/UI/base-header/components/services/ServiceBody.vue
+++ b/launcher/src/components/UI/base-header/components/services/ServiceBody.vue
@@ -7,11 +7,61 @@
 <script setup>
 import ServiceCarousel from "./ServiceCarousel.vue";
 import { useNodeHeader } from "@/store/nodeHeader";
+import { useSetups } from "@/store/setups";
 import { computed } from "vue";
 
 const headerStore = useNodeHeader();
+const setupsStore = useSetups();
 
 const slides = computed(() => {
-  return JSON.parse(JSON.stringify(headerStore.runningServices));
+  const services = headerStore.runningServices;
+  const selectedSetup = setupsStore.selectedSetup;
+
+  if (!selectedSetup || !Array.isArray(selectedSetup.services)) {
+    return services.filter(
+      (service) =>
+        service.service !== "FlashbotsMevBoostService" &&
+        service.service !== "SSVNetworkService" &&
+        service.service !== "CharonService"
+    );
+  }
+
+  const mevBoostInSetup = selectedSetup.services.some(
+    (service) => service.service === "FlashbotsMevBoostService"
+  );
+
+  const ssvInSetup = selectedSetup.services.some(
+    (service) => service.service === "SSVNetworkService"
+  );
+
+  const obolInSetup = selectedSetup.services.some(
+    (service) => service.service === "CharonService"
+  );
+
+  let filteredServices = services.filter((service) => {
+    if (!mevBoostInSetup && service.service === "FlashbotsMevBoostService") return false;
+    if (!ssvInSetup && service.service === "SSVNetworkService") return false;
+    if (!obolInSetup && service.service === "CharonService") return false;
+    return true;
+  });
+
+  const uniqueServices = [
+    "FlashbotsMevBoostService",
+    "SSVNetworkService",
+    "CharonService",
+  ];
+
+  uniqueServices.forEach((uniqueService) => {
+    const serviceIndex = filteredServices.findIndex(
+      (service) => service.service === uniqueService
+    );
+    if (serviceIndex !== -1) {
+      filteredServices = filteredServices.filter(
+        (service, index) => service.service !== uniqueService || index === serviceIndex
+      );
+    }
+  });
+
+  return filteredServices;
 });
 </script>
diff --git a/launcher/src/components/UI/edit-page/components/modals/MevboostRelays.vue b/launcher/src/components/UI/edit-page/components/modals/MevboostRelays.vue
index e04b55eb16..e182e11368 100644
--- a/launcher/src/components/UI/edit-page/components/modals/MevboostRelays.vue
+++ b/launcher/src/components/UI/edit-page/components/modals/MevboostRelays.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="w-10/12 h-full grid grid-cols-2 grid-flow-row p-2 mx-auto trasnform duration-200 mt-6">
+  <div
+    class="w-10/12 h-full grid grid-cols-2 grid-flow-row p-2 mx-auto trasnform duration-200 mt-6"
+  >
     <RelaysCheckbox
       v-for="relay in availableBlocks"
       :key="relay.id"
@@ -15,6 +17,7 @@
 import RelaysCheckbox from "./RelaysCheckbox.vue";
 import { useNodeManage } from "@/store/nodeManage";
 import { onMounted, computed } from "vue";
+import { useSetups } from "@/store/setups";
 
 const manageStore = useNodeManage();
 
@@ -29,11 +32,13 @@ const props = defineProps({
   },
 });
 
+const setupsStore = useSetups();
+
 const availableBlocks = computed({
   get: () => manageStore.availableBlocks,
   set: () =>
     (manageStore.availableBlocks = shuffleRelaysList(
-      manageStore.relaysList.filter((r) => r[manageStore.currentNetwork.network])
+      manageStore.relaysList.filter((r) => r[setupsStore.selectedSetup.network])
     )),
 });
 
@@ -43,7 +48,7 @@ onMounted(() => {
     relay.isSelected = false;
   });
   manageStore.availableBlocks = shuffleRelaysList(
-    manageStore.relaysList.filter((r) => r[manageStore.currentNetwork.network])
+    manageStore.relaysList.filter((r) => r[setupsStore.selectedSetup.network])
   );
 });
 
diff --git a/launcher/src/components/UI/services-modal/MevboostModal.vue b/launcher/src/components/UI/services-modal/MevboostModal.vue
index 5241a1671d..814d9bc5aa 100755
--- a/launcher/src/components/UI/services-modal/MevboostModal.vue
+++ b/launcher/src/components/UI/services-modal/MevboostModal.vue
@@ -62,6 +62,7 @@
 import { mapState, mapWritableState } from "pinia";
 import { useNodeManage } from "@/store/nodeManage";
 import { useServices } from "@/store/services";
+import { useSetups } from "@/store/setups";
 import ControlService from "@/store/ControlService";
 import { toRaw } from "vue";
 export default {
@@ -84,7 +85,9 @@ export default {
     }),
     ...mapWritableState(useNodeManage, {
       relaysList: "relaysList",
-      currentNetwork: "currentNetwork",
+    }),
+    ...mapState(useSetups, {
+      selectedSetup: "selectedSetup",
     }),
     combinedBlocs() {
       let names = new Set();
@@ -101,8 +104,9 @@ export default {
   mounted() {
     this.filtermevService();
     this.availableBlocks = this.shuffleRelaysList(
-      this.relaysList.filter((r) => r[this.currentNetwork.network.toLowerCase()])
+      this.relaysList.filter((r) => r[this.selectedSetup?.network.toLowerCase()])
     );
+    console.log(this.selectedSetup);
   },
   methods: {
     shuffleRelaysList(array) {
@@ -136,7 +140,7 @@ export default {
                 if (service.entrypoint[relayEntryPointIndex + 1]) {
                   const relayURLs = service.entrypoint[relayEntryPointIndex + 1].split(",");
                   relayURLs.forEach((relay) => {
-                    let relayData = this.relaysList.find((r) => r[this.currentNetwork.network.toLowerCase()] === relay);
+                    let relayData = this.relaysList.find((r) => r[this.selectedSetup?.network.toLowerCase()] === relay);
                     if (relayData) this.checkedRelays.push(relayData);
                   });
                 }
@@ -174,7 +178,7 @@ export default {
       this.loading = true;
       if (this.serviceConfig.entrypoint) {
         this.serviceConfig.entrypoint[this.serviceConfig.entrypoint.findIndex((e) => e === "-relays") + 1] =
-          this.checkedRelays.map((r) => r[this.currentNetwork.network.toLowerCase()]).join();
+          this.checkedRelays.map((r) => r[this.selectedSetup?.network.toLowerCase()]).join();
         ControlService.writeServiceConfig(toRaw(this.serviceConfig)).then(() => {
           setTimeout(() => {
             this.loading = false;