ADD: multi setups (configs)

launcher/package.json

@@ -43,6 +43,7 @@
     "geoip-lite": "^1.4.7",
     "jszip": "^3.10.1",
     "leader-line-new": "^1.1.9",
+    "ping": "^0.4.4",
     "pinia": "^2.0.33",
     "qrcode": "^1.5.1",
     "semver": "^7.6.0",

launcher/src/backend/ConfigManager.js

@@ -0,0 +1,364 @@
+const log = require("electron-log");
+const yaml = require("js-yaml");
+const uuid = require("uuid");
+
+export class ConfigManager {
+  constructor(nodeConnection) {
+    this.nodeConnection = nodeConnection;
+    this.serviceManager = null;
+    this.multiSetupPath = "/etc/stereum/multisetup.yaml";
+    this.commonServices = [
+      "PrometheusService",
+      "GrafanaService",
+      "PrometheusNodeExporterService",
+      "NotificationService",
+    ];
+  }
+  setServiceManager(serviceManager) {
+    this.serviceManager = serviceManager;
+  }
+
+  /**
+   * Checks if the multi-setup file exists, reads all installed services if not, and creates a multi-setup.yaml file.
+   */
+  async checkAndCreateMultiSetup() {
+    try {
+      const fileExistResult = await this.checkFileExistence();
+      if (!fileExistResult || !fileExistResult.stdout) {
+        throw new Error("Invalid response from checkFileExistence");
+      }
+
+      const services = await this.serviceManager.readServiceConfigurations();
+      if (!Array.isArray(services)) {
+        throw new Error("Invalid response from readServiceConfigurations");
+      }
+
+      if (fileExistResult.stdout.includes("notExist")) {
+        if (services.length === 0) {
+          await this.createMultiSetupYaml({}, "");
+        } else if (services.length > 0) {
+          const network = services[0]?.network;
+          if (!network) {
+            throw new Error("Service configuration is missing network information");
+          }
+          await this.createMultiSetupYaml(services, network);
+        }
+      }
+    } catch (error) {
+      console.error("Error in checkAndCreateMultiSetup:", error.message, error.stack);
+    }
+  }
+
+  /**
+   * Asynchronously checks if a specific file exists on a remote system using SSH.
+   * Executes 'test -f' to determine file presence, echoing "exist" or "notExist".
+   *
+   * @returns {Promise<Object>} Resolves with command execution result, indicating file existence.
+   */
+  async checkFileExistence() {
+    const fileExistResult = await this.nodeConnection.sshService.exec(
+      `test -f ${this.multiSetupPath} && echo "exist" || echo "notExist"`
+    );
+    return fileExistResult;
+  }
+
+  /**
+   * Creates a multi-setup configuration file in YAML format.
+   *
+   * @param {Object|string} services - The configurations to include in the setup. If a string is provided,
+   * it is treated as a single configuration ID. If an object is provided, it should map configuration IDs
+   * to configuration objects.
+   * @param {string} network - The network of the setup.
+   */
+  async createMultiSetupYaml(services, network) {
+    try {
+      // Check if the multiSetup configuration file exists
+      const fileExistResult = await this.checkFileExistence();
+
+      // If the file does not exist, create it
+      if (fileExistResult.stdout.includes("notExist")) {
+        await this.nodeConnection.sshService.exec(`touch ${this.multiSetupPath}`);
+      }
+
+      if (!Array.isArray(services)) {
+        services = [];
+      }
+
+      await this.createMultiSetupContent(services, network);
+    } catch (error) {
+      console.error(`Failed to create multi-setup configuration file in YAML format: ${error}`);
+    }
+  }
+
+  /**
+   * Creates the content for a multi-setup configuration file.
+   * @param {Object|string} services - The configurations to include in the setup.
+   * @param {string} network - The network of the setup.
+   * @returns {Promise<void>} - does not return anything.
+   */
+  async createMultiSetupContent(services, network) {
+    let setupServicesObj = await this.createSetupContent(services, network);
+    let commonServicesObj = await this.createCommonContent(services);
+    let setups = { ...setupServicesObj, ...commonServicesObj };
+    await this.writeMultiSetup(setups);
+  }
+
+  /**
+   * Creates the content for a setup
+   *
+   * @param {Array} services - The services to include in the setup.
+   * @param {string} network - The network of the setup.
+   * @returns {Object} - An object representing the setup configuration.
+   */
+  async createSetupContent(services, network) {
+    const setupServices = services.filter((item) => !this.commonServices.includes(item.service));
+    let setupServicesObj = {};
+    if (setupServices.length > 0) {
+      let setupId = uuid.v4();
+      setupServicesObj = {
+        [setupId]: {
+          name: "setup1",
+          network: network,
+          color: "default",
+          type: "ETH",
+          services: setupServices.map((service) => service.id),
+        },
+      };
+    }
+    return setupServicesObj;
+  }
+
+  /**
+   * Creates the content for a common setup
+   *
+   * @param {Array} services - The services to include in the setup.
+   * @returns {Promise<Object>} - An object representing the common services setup configuration.
+   */
+  async createCommonContent(services) {
+    const commonServices = services.filter((item) => this.commonServices.includes(item.service));
+    let currentSetups = await this.readMultiSetup();
+    let setupsObj = yaml.load(currentSetups);
+
+    let setupId;
+    let commonServicesObj;
+
+    // Check if a commonServices setup already exists
+    for (let key in setupsObj) {
+      if (setupsObj[key].name === "commonServices") {
+        setupId = key;
+        commonServicesObj = { [setupId]: setupsObj[key] };
+        break;
+      }
+    }
+
+    // If no commonServices setup exists, create a new one
+    if (!commonServicesObj) {
+      setupId = uuid.v4();
+      commonServicesObj = {
+        [setupId]: {
+          name: "commonServices",
+          network: "default",
+          color: "default",
+          type: "default",
+          services: [],
+        },
+      };
+    }
+
+    if (commonServices.length > 0) {
+      commonServicesObj[setupId].services = commonServicesObj[setupId].services.concat(
+        commonServices.map((service) => service.id)
+      );
+    }
+    return commonServicesObj;
+  }
+
+  /**
+   * Writes a setup to the multi-setup configuration file.
+   *
+   * @param {Object} setup - The setup to write to the multi-setup configuration file.
+   */
+  async writeMultiSetup(setup) {
+    try {
+      // Convert the setup object to a YAML string and escape backticks
+      let setupYaml = yaml.safeDump(setup).replace(/`/g, "\\`");
+
+      await this.nodeConnection.sshService.exec(`echo -e "${setupYaml}" > ${this.multiSetupPath}`);
+    } catch (error) {
+      console.error(`Failed to write setup to multi-setup configuration file: ${error}`);
+    }
+  }
+
+  /**
+   * Reads the multi-setup configuration file.
+   *
+   * @returns {Promise<string|undefined>} The content of the multi-setup configuration file,
+   * or undefined if an error occurs.
+   */
+  async readMultiSetup() {
+    try {
+      let result = await this.nodeConnection.sshService.exec(`cat ${this.multiSetupPath}`);
+      if (result) {
+        return result.stdout;
+      } else {
+        log.error("Result is undefined");
+        return undefined;
+      }
+    } catch (err) {
+      log.error("Can't read multiConfig file", err);
+      return undefined;
+    }
+  }
+
+  /**
+   * Renames an existing setup.
+   *
+   * @param {Object} setup - The setup object.
+   * @param {string} setup.setupId - The id of the setup to rename.
+   * @param {string} setup.setupName - The new name for the setup.
+   */
+  async renameSetup(setup) {
+    try {
+      let currentSetups = await this.readMultiSetup();
+      let setupsObj = yaml.load(currentSetups);
+
+      if (setupsObj[setup.setupId]) {
+        setupsObj[setup.setupId].name = setup.setupName;
+      } else {
+        throw new Error(`Setup with id ${setup.setupId} not found.`);
+      }
+
+      await this.writeMultiSetup(setupsObj);
+    } catch (error) {
+      console.error(`Failed to rename setup: ${error.message}`);
+      throw error;
+    }
+  }
+
+  /**
+   * Adds a service to a setup in the multi-setup configuration.
+   *
+   * @param {string} service - The ID of the service to add.
+   * @param {string} [setupID=null] - The ID of the setup to add the service to.
+   */
+  async addServiceIntoSetup(service, setupID) {
+    try {
+      let currentSetups = await this.readMultiSetup();
+      let setupsObj = yaml.load(currentSetups);
+
+      // If the setup exists, add the service into it
+      if (setupsObj[setupID]) {
+        let setupServices = setupsObj[setupID].services;
+        if (!setupServices.includes(service.id)) {
+          setupServices.push(service.id);
+        }
+        await this.writeMultiSetup(setupsObj);
+      } else {
+        console.log("Setup not found!");
+      }
+    } catch (error) {
+      console.error(`Failed to add service to setup: ${error}`);
+    }
+  }
+
+  /**
+   * Deletes a service from a setup.
+   *
+   * @param {string} serviceID - The ID of the service to be deleted.
+   * @param {string} setupID - The ID of the setup from which the service will be deleted.
+   * @throws Will throw an error if the reading or writing operations fail.
+   */
+  async deleteServiceFromSetup(serviceID, setupID) {
+    try {
+      let currentSetups = await this.readMultiSetup();
+      let setupsObj = yaml.load(currentSetups);
+
+      // Check if the setup exists and contains the service
+      if (setupsObj[setupID] && setupsObj[setupID].services.includes(serviceID)) {
+        setupsObj[setupID].services = setupsObj[setupID].services.filter((id) => id !== serviceID);
+
+        await this.writeMultiSetup(setupsObj);
+      } else {
+        console.log(`Service ${serviceID} not found in setup ${setupsObj[setupID].name}`);
+      }
+    } catch (error) {
+      console.error(`Failed to delete service from multiSetup: ${error}`);
+    }
+  }
+
+  /**
+   * Deletes a setup.
+   *
+   * @param {string} setupID - The ID of the setup to be deleted.
+   * @throws Will throw an error if the reading or writing operations fail.
+   */
+  async deleteSetup(setupID) {
+    try {
+      let currentSetups = await this.readMultiSetup();
+      let setupsObj = yaml.load(currentSetups);
+
+      delete setupsObj[setupID];
+
+      await this.writeMultiSetup(setupsObj);
+    } catch (error) {
+      console.error(`Failed to delete service from multi-setup: ${error}`);
+    }
+  }
+
+  /**
+   * retrieves a specific setup by its ID
+   *
+   * @param {string} setupID - The ID of the setup to retrieve.
+   * @returns {Promise<Object>} A promise that resolves to the setup configuration.
+   */
+  async getSetup(setupID) {
+    let currentSetups = await this.readMultiSetup();
+    let setupsObj = yaml.load(currentSetups);
+
+    return {
+      [setupID]: setupsObj[setupID],
+    };
+  }
+
+  /**
+   * Creates a new setup and adds it to the multi-setup configuration.
+   *
+   * @param {Object} newSetup - The setup object to add.
+   */
+  async createSetup(newSetup) {
+    let currentSetups = await this.readMultiSetup();
+    let setupsObj = {};
+    if (currentSetups) {
+      setupsObj = yaml.load(currentSetups);
+    }
+    let setupId = uuid.v4();
+    if (!setupsObj[setupId]) {
+      setupsObj[setupId] = newSetup;
+      await this.writeMultiSetup(setupsObj);
+    }
+  }
+
+  async getSetups() {
+    let currentSetups = await this.readMultiSetup();
+    let setupsObj = yaml.load(currentSetups);
+
+    return setupsObj;
+  }
+
+  async switchSetupNetwork(data) {
+    if (typeof data.setupId !== "string" || typeof data.network !== "string") {
+      console.error("Invalid parameters");
+      return false;
+    }
+
+    let currentSetups = await this.readMultiSetup();
+    let setupsObj = yaml.load(currentSetups);
+    if (setupsObj.hasOwnProperty(data.setupId)) {
+      setupsObj[data.setupId].network = data.network;
+      await this.writeMultiSetup(setupsObj);
+      return true;
+    } else {
+      throw new Error("Setup ID not found"); // Enhanced error handling
+    }
+  }
+}

launcher/src/backend/NodeConnection.js

@@ -5,6 +5,7 @@ import { ServiceVolume } from "./ethereum-services/ServiceVolume";
 import net from "net";
 import YAML from "yaml";
 import { NodeUpdates } from "./NodeUpdates";
+import { ConfigManager } from "./ConfigManager";
 import axios from "axios";
 const log = require("electron-log");
 const electron = require("electron");
@@ -29,6 +30,7 @@ export class NodeConnection {
     this.os = null;
     this.osv = null;
     this.nodeUpdates = new NodeUpdates(this);
+    this.configManager = new ConfigManager(this);
   }
 
   async establish(taskManager, currentWindow) {
@@ -1811,8 +1813,9 @@ export class NodeConnection {
    * write a specific service configuration
    *
    * @param serviceConfiguration servicd configuration to write to the node
+   * @param {string|null} setupID - The setup ID. Defaults to null.
    */
-  async writeServiceConfiguration(serviceConfiguration) {
+  async writeServiceConfiguration(serviceConfiguration, setupID = null) {
     let configStatus;
     const ref = StringUtils.createRandomString();
     this.taskManager.tasks.push({ name: "write config", otherRunRef: ref });
@@ -1824,6 +1827,7 @@ export class NodeConnection {
           serviceConfiguration.id +
           ".yaml"
       );
+      if (setupID) await this.configManager.addServiceIntoSetup(serviceConfiguration, setupID);
     } catch (err) {
       this.taskManager.otherSubTasks.push({
         name: "write " + serviceConfiguration.service + " config",

launcher/src/backend/OneClickInstall.js

@@ -1,6 +1,7 @@
 import { ServiceManager } from "./ServiceManager";
 import YAML from "yaml";
 import { StringUtils } from "./StringUtils";
+import { ConfigManager } from "./ConfigManager";
 
 const log = require("electron-log");
 
@@ -13,6 +14,7 @@ export class OneClickInstall {
     this.installDir = installDir;
     this.nodeConnection = nodeConnection;
     this.serviceManager = new ServiceManager(this.nodeConnection);
+    this.configManager = new ConfigManager(this.nodeConnection);
     const arch = await this.nodeConnection.getCPUArchitecture();
     const settings = {
       stereum_settings: {
@@ -31,6 +33,7 @@ export class OneClickInstall {
     await this.nodeConnection.sshService.exec(`rm -rf /etc/stereum &&\
     mkdir -p /etc/stereum/services &&\
     echo -e ${StringUtils.escapeStringForShell(YAML.stringify(settings))} > /etc/stereum/stereum.yaml`);
+    await this.configManager.createMultiSetupYaml({}, "");
     await this.nodeConnection.findStereumSettings();
     return await this.nodeConnection.prepareStereumNode(
       this.nodeConnection.settings.stereum.settings.controls_install_path
@@ -399,6 +402,7 @@ export class OneClickInstall {
   async writeConfig() {
     const configs = this.getConfigurations();
     if (configs[0] !== undefined) {
+      this.configManager.createMultiSetupYaml(configs, this.network);
       await Promise.all(
         configs.map(async (config) => {
           await this.nodeConnection.writeServiceConfiguration(config);

launcher/src/backend/SSHService.js

@@ -7,6 +7,7 @@ import { StringUtils } from "./StringUtils";
 import * as fs from "fs";
 import * as path from "path";
 const log = require("electron-log");
+const ping = require("ping");
 
 export class SSHService {
   constructor() {
@@ -62,6 +63,27 @@ export class SSHService {
     });
   }
 
+  // Check the connection quality by pinging the host
+  async checkConnectionQuality() {
+    const host = this.connectionInfo.host;
+    let connectionQuality = { pingTime: null };
+
+    try {
+      const res = await ping.promise.probe(host, {
+        timeout: 2,
+      });
+
+      if (typeof res.time !== "undefined" && res.time !== null) {
+        connectionQuality.pingTime = res.time;
+      } else {
+        console.log(`Ping to ${host} failed or timed out`);
+      }
+    } catch (err) {
+      console.error("Ping failed:", err);
+    }
+    return connectionQuality;
+  }
+
   async checkConnectionPool() {
     let lastIndex = this.connectionPool.length - 1;
     const threshholdIndex = lastIndex - 2;
@@ -118,8 +140,7 @@ export class SSHService {
         if (!connectionInfo.authCode) {
           currentWindow.send("require2FA", true);
           conn.end();
-        }
-        else {
+        } else {
           finish([connectionInfo.authCode.toString()]);
         }
       });
@@ -174,9 +195,14 @@ export class SSHService {
         await new Promise((resolve) => setTimeout(resolve, 1000));
         counter++;
       }
-      log.info("SSH Channels left open: ", this.connectionPool.map(c => c._chanMgr?._count).reduce((accumulator, currentValue) => {
-        return accumulator + currentValue
-      }, 0))
+      log.info(
+        "SSH Channels left open: ",
+        this.connectionPool
+          .map((c) => c._chanMgr?._count)
+          .reduce((accumulator, currentValue) => {
+            return accumulator + currentValue;
+          }, 0)
+      );
       this.connectionPool = [];
       return true;
     } catch (error) {
@@ -185,7 +211,8 @@ export class SSHService {
   }
 
   async exec(command, useSudo = true, useRoot = true) {
-    const ensureSudoCommand = `sudo -u ${useRoot ? 'root' : this.connectionInfo.user} -i <<'=====EOF'\n` + command + `\n=====EOF`;
+    const ensureSudoCommand =
+      `sudo -u ${useRoot ? "root" : this.connectionInfo.user} -i <<'=====EOF'\n` + command + `\n=====EOF`;
     return this.execCommand(useSudo ? ensureSudoCommand : command);
   }
 
@@ -373,7 +400,8 @@ export class SSHService {
       if (sshDirPath.endsWith("/")) sshDirPath = sshDirPath.slice(0, -1, ""); //if path ends with '/' remove it
       let newKeys = keys.join("\n");
       let result = await this.exec(
-        `echo -e ${StringUtils.escapeStringForShell(newKeys)} > ${sshDirPath}/authorized_keys`, false
+        `echo -e ${StringUtils.escapeStringForShell(newKeys)} > ${sshDirPath}/authorized_keys`,
+        false
       );
       if (SSHService.checkExecError(result)) {
         throw new Error("Failed writing authorized keys:\n" + SSHService.extractExecError(result));

launcher/src/background.js

@@ -10,6 +10,7 @@ import { ValidatorAccountManager } from "./backend/ValidatorAccountManager.js";
 import { TaskManager } from "./backend/TaskManager.js";
 import { Monitoring } from "./backend/Monitoring.js";
 import { StereumUpdater } from "./StereumUpdater.js";
+import { ConfigManager } from "./backend/ConfigManager.js";
 import { AuthenticationService } from "./backend/AuthenticationService.js";
 import { SSHService } from "./backend/SSHService.js";
 import path from "path";
@@ -23,6 +24,8 @@ const monitoring = new Monitoring(nodeConnection);
 const oneClickInstall = new OneClickInstall();
 const serviceManager = new ServiceManager(nodeConnection);
 const validatorAccountManager = new ValidatorAccountManager(nodeConnection, serviceManager);
+const configManager = new ConfigManager(nodeConnection);
+configManager.setServiceManager(serviceManager);
 const authenticationService = new AuthenticationService(nodeConnection);
 const sshService = new SSHService();
 const { globalShortcut } = require("electron");
@@ -637,13 +640,50 @@ ipcMain.handle("copyExecutionJWT", async (event, args) => {
   return await serviceManager.copyExecutionJWT(args);
 });
 
+ipcMain.handle("readMultiSetup", async () => {
+  return await configManager.readMultiSetup();
+});
+
+ipcMain.handle("createSetup", async (event, args) => {
+  return await configManager.createSetup(args);
+});
+
+ipcMain.handle("deleteSetup", async (event, args) => {
+  return await configManager.deleteSetup(args);
+});
+
+ipcMain.handle("renameSetup", async (event, args) => {
+  return await configManager.renameSetup(args);
+});
+
+ipcMain.handle("exportSingleSetup", async (event, args) => {
+  return await serviceManager.exportSingleSetup(args);
+});
+
+ipcMain.handle("importSingleSetup", async (event, args) => {
+  return await serviceManager.importSingleSetup(args);
+});
+
+ipcMain.handle("switchSetupNetwork", async (event, args) => {
+  return await configManager.switchSetupNetwork(args);
+});
+
 ipcMain.handle("fetchTranslators", async (event, args) => {
   return await serviceManager.fetchTranslators(args);
 });
 
 ipcMain.handle("fetchGitHubTesters", async (event, args) => {
   return await serviceManager.fetchGitHubTesters(args);
 });
+
+ipcMain.handle("checkAndCreateMultiSetup", async () => {
+  return await configManager.checkAndCreateMultiSetup();
+});
+
+ipcMain.handle("checkConnectionQuality", async (event, args) => {
+  return await nodeConnection.sshService.checkConnectionQuality(args);
+});
+
 ipcMain.handle("startShell", async (event) => {
   if (!nodeConnection.sshService.shellStream) {
     try {

launcher/src/components/UI/edit-page/components/drawer/DrawerBox.vue

@@ -1,111 +1,11 @@
-import { useServices } from '@/store/services';
 <template>
-  <div class="w-28 h-full flex flex-col justify-between items-center fixed right-0 top-0">
+  <div
+    class="w-44 h-full flex flex-col justify-between items-center fixed right-0 top-0 z-10"
+  >
     <div
       class="grid grid-cols-1 grid-rows-15 w-full h-full px-2 py-4 overflow-hidden border-l border-gray-500 rounded-l-xl bg-[#2e5151]"
     >
-      <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"
-      >
-        <label for="Search" class="sr-only"> {{ $t("multiServer.serch") }} </label>
-
-        <input
-          id="Search"
-          v-model="searchQuery"
-          type="text"
-          :placeholder="`${$t('multiServer.serchFor')}`"
-          class="w-full h-full rounded-md border-gray-200 py-2.5 pe-10 shadow-sm sm:text-sm px-2"
-        />
-
-        <span class="absolute inset-y-0 end-0 grid w-10 place-content-center">
-          <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"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
-              />
-            </svg>
-          </button>
-        </span>
-      </div>
-
-      <div
-        class="col-span-1 row-start-4 row-span-full w-full h-[430px] flex flex-col items-center space-y-6 bg-[#151618] border border-gray-500 rounded-md overflow-y-scroll py-3 overflow-x-hidden"
-      >
-        <div
-          v-for="service in filteredServers"
-          :key="service.serviceID"
-          class="w-full relative inline-block cursor-pointer"
-          draggable="true"
-          @dragstart="dragStart($event, service)"
-          @dblclick="addServices(service)"
-          @mouseenter="footerStore.cursorLocation = `${service.name} ${serv}`"
-        >
-          <img :src="service.sIcon" alt="Client Icon" class="w-14 mx-auto" />
-          <p
-            v-if="service.displayTooltip"
-            class="min-w-[50px] h-[20px] absolute flex items-center justify-center p-1 text-gray-800 bg-white rounded-sm border border-gray-950 shadow-lg z-20"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="w-4 h-4 absolute rotate-45 right-4 -top-1 transform text-white fill-current"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path d="M20 3H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1z"></path>
-            </svg>
-            <span class="text-xs truncate z-10">{{ service.name }}</span>
-          </p>
-        </div>
-      </div>
+      <slot></slot>
     </div>
   </div>
 </template>
-
-<script setup>
-import DrawerFilter from "./DrawerFilter.vue";
-import { useServices } from "@/store/services";
-import { useFooter } from "@/store/theFooter";
-import i18n from "@/includes/i18n";
-import { computed, ref } from "vue";
-
-const t = i18n.global.t;
-
-const serv = t("serviceLay.srvice");
-const searchQuery = ref("");
-
-const footerStore = useFooter();
-const serviceStore = useServices();
-const props = defineProps({
-  dragging: Function,
-});
-
-// eslint-disable-next-line vue/no-setup-props-destructure
-const dragStart = props.dragging;
-
-const emit = defineEmits(["addServices", "startDrag"]);
-
-const filteredServers = computed(() => {
-  if (!searchQuery.value) {
-    return serviceStore.filteredServices;
-  }
-  return serviceStore.filteredServices.filter((service) =>
-    service.name.toLowerCase().includes(searchQuery.value.toLowerCase())
-  );
-});
-
-function addServices(service) {
-  emit("addServices", service);
-}
-</script>

launcher/src/components/UI/edit-page/components/drawer/DrawerFilter.vue

@@ -1,52 +1,58 @@
 <template>
-  <div class="col-span-1 row-start-1 row-end-2 z-10 flex">
-    <Listbox v-model="selectedfilter">
-      <div class="w-full relative mt-1">
-        <ListboxButton class="relative w-full cursor-default rounded-md bg-gray-200 p-1 text-left shadow-md text-sm">
-          <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">{{ selectedfilter.name }}</span>
-        </ListboxButton>
-
-        <transition
-          leave-active-class="transition duration-100 ease-in"
-          leave-from-class="opacity-100"
-          leave-to-class="opacity-0"
+  <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"
+        >
+          <ChevronUpDownIcon class="h-3 w-3 text-gray-400" aria-hidden="true" />
+        </span>
+        <span class="block truncate text-center">{{ selectedFilter.name }}</span>
+      </button>
+      <transition
+        name="fade"
+        leave-active-class="transition duration-100 ease-in"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+      >
+        <ul
+          v-if="isOpen"
+          class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none text-sm"
         >
-          <ListboxOptions
-            class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none text-sm"
+          <li
+            v-for="filter in filters"
+            :key="filter.name"
+            class="flex justify-center cursor-default select-none p-1 text-gray-900 hover:bg-gray-300"
+            @click="selectFilter(filter)"
           >
-            <ListboxOption
-              v-for="filter in filters"
-              v-slot="{ active, selected }"
-              :key="filter.name"
-              :value="filter"
-              as="template"
+            <span
+              v-if="selectedFilter.name === filter.name"
+              class="flex items-center text-cyan-600"
+            >
+              <CheckIcon class="h-3 w-3" aria-hidden="true" />
+            </span>
+            <span
+              class="block truncate"
+              :class="{
+                'font-medium': selectedFilter.name === filter.name,
+                'font-normal': selectedFilter.name !== filter.name,
+              }"
             >
-              <li
-                :class="[
-                  active ? 'bg-gray-300 text-cyan-500' : 'text-gray-900',
-                  'flex justify-center cursor-default select-none p-1',
-                ]"
-              >
-                <span v-if="selected" class="flex items-center text-cyan-600">
-                  <CheckIcon class="h-3 w-3" aria-hidden="true" />
-                </span>
-                <span :class="[selected ? 'font-medium' : 'font-normal', 'block truncate']">{{ filter.name }}</span>
-              </li>
-            </ListboxOption>
-          </ListboxOptions>
-        </transition>
-      </div>
-    </Listbox>
+              {{ filter.name }}
+            </span>
+          </li>
+        </ul>
+      </transition>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { computed, ref } from "vue";
-import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from "@headlessui/vue";
-import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
+import { computed, onMounted, ref, watch } from "vue";
+import { ChevronUpDownIcon, CheckIcon } from "@heroicons/vue/20/solid";
 import { useServices } from "@/store/services";
 import { useNodeManage } from "@/store/nodeManage";
 
@@ -60,37 +66,76 @@ const filters = [
 
 const serviceStore = useServices();
 const manageStore = useNodeManage();
+const selectedFilter = ref(filters[0]);
+const isOpen = ref(false);
 
-const selectedfilter = ref(filters[0]);
+const toggleDropdown = () => {
+  isOpen.value = !isOpen.value;
+};
 
-serviceStore.filteredServices = computed(() => {
-  if (selectedfilter.value.name.toLowerCase() === "all") {
-    return serviceStore.allServices.filter(getFilterbyNetwork());
-  } else {
-    return serviceStore.allServices
-      .filter((item) => item.category.toLowerCase() === selectedfilter.value.name.toLowerCase())
-      .filter(getFilterbyNetwork());
-  }
+const selectFilter = (filter) => {
+  selectedFilter.value = filter;
+  isOpen.value = false;
+};
+
+const networkArchFilteredServices = computed(() => {
+  return serviceStore.allServices.filter((service) => {
+    return networkFilter(service) && archFilter(service);
+  });
 });
-const getFilterbyNetwork = () => {
+
+const filteredServices = () => {
+  const filterName = selectedFilter.value?.name?.toLowerCase() ?? "all";
+  return filterName === "all"
+    ? networkArchFilteredServices.value
+    : networkArchFilteredServices.value.filter(
+        (service) => service.category.toLowerCase() === filterName.toLowerCase()
+      );
+};
+
+onMounted(() => {
+  serviceStore.filteredServices = filteredServices();
+});
+
+watch(selectedFilter, () => {
+  serviceStore.filteredServices = filteredServices();
+});
+
+//serviceStore.filteredServices
+//Methods
+
+const networkFilter = (service) => {
   switch (manageStore.configNetwork.network) {
     case "mainnet":
       return (item) => archFilter(item.service);
     case "holesky":
-      return (item) => item.service != archFilter(item.service);
+      return service.service !== "SSVNetworkService";
     case "sepolia":
-      return (item) => item.service != "SSVNetworkService" && archFilter(item.service);
+      return service.service !== "SSVNetworkService";
     case "gnosis":
-      return (item) =>
-        /(Lighthouse|Teku|Nethermind|Erigon|Grafana|Prometheus)/.test(item.service) && archFilter(item.service);
+      return /(Lighthouse|Teku|Nethermind|Erigon|Grafana|Prometheus)/.test(
+        service.service
+      );
     default:
-      return (item) => item.service != "SSVNetworkService" && archFilter(item.service);
+      return service.service !== "SSVNetworkService";
   }
 };
+
 const archFilter = (service) => {
   const armArchs = ["arm", "arm64", "aarch64_be", "aarch64", "armv8b", "armv8l"];
   return armArchs.includes(manageStore.architecture)
-    ? !/(Prysm|ValidatorEjector|KeysAPI|Notification)/.test(service)
+    ? !/(Prysm|ValidatorEjector|KeysAPI|Notification)/.test(service.service)
     : true;
 };
 </script>
+
+<style>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.1s;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

launcher/src/components/UI/edit-page/components/drawer/DrawerMenu.vue

@@ -0,0 +1,109 @@
+<template>
+  <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-2"
+  >
+    <div
+      class="col-start-1 col-span-full row-start-1 row-end-3 w-full h-full bg-[#232428] rounded-md flex flex-col justify-between items-center p-1"
+    >
+      <span class="text-xs text-center text-gray-100 font-sans uppercase mt-1"
+        >Create a setup</span
+      >
+
+      <div
+        class="w-full h-7 bg-teal-700 rounded-[5px] text-center cursor-pointer hover:bg-teal-900 hover:scale-95 active:scale-90 transition-all duration-100"
+        @click="createSetup"
+      >
+        <span class="h-full text-xs text-gray-200 uppercase">Create</span>
+      </div>
+    </div>
+    <div
+      class="col-start-1 col-span-full row-start-3 row-end-5 w-full h-full bg-[#232428] rounded-md flex flex-col justify-between items-center p-1"
+    >
+      <span class="text-xs text-center text-gray-100 font-sans uppercase mt-1"
+        >IMPORT A CONFIG</span
+      >
+
+      <div
+        class="w-full h-7 bg-teal-700 rounded-[5px] text-center cursor-pointer hover:bg-teal-900 hover:scale-95 active:scale-90 transition-all duration-100"
+        @click="importSetup"
+      >
+        <span class="text-xs h-full text-gray-200 uppercase">Import</span>
+      </div>
+    </div>
+    <div
+      class="col-start-1 col-span-full row-start-5 row-end-10 w-full h-full bg-[#232428] rounded-md grid grid-cols-6 grid-rows-6 items-start gap-y-1 p-1"
+    >
+      <span
+        class="col-start-1 col-span-full row-start-1 row-span-1 text-xs text-center text-gray-100 font-sans uppercase"
+        >ADD A SERVER SERVICE</span
+      >
+      <div
+        class="w-full h-full col-start-1 col-span-full row-start-2 row-span-full max-h-full overflow-x-hidden overflow-y-auto flex flex-col justify-start items-center space-y-1 bg-[#151618] p-1"
+      >
+        <div
+          v-for="service in getServerServices"
+          :key="service"
+          class="w-full h-7 min-h-7 bg-[#282a2c] hover:bg-gray-700 rounded-sm border border-gray-600 mx-auto shadow-md shadow-black grid grid-cols-6 items-center p-[2px] cursor-pointer overflow-hidden"
+          :class="service.isDuplicated ? 'pointer-events-none opacity-50' : ''"
+          @dblclick="addService(service)"
+        >
+          <img
+            class="w-5 h-5 col-start-1 col-span-1 mx-auto self-center"
+            :src="service.icon"
+            alt="Service Icon"
+          />
+          <span
+            class="col-start-2 col-span-full self-center text-xs text-gray-200 text-left font-sans truncate"
+            >{{ service.service }}</span
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { useServices } from "@/store/services";
+import { useSetups } from "../../../../../store/setups";
+import { useNodeManage } from "../../../../../store/nodeManage";
+
+const emit = defineEmits(["importSetup", "createSetup", "addService"]);
+
+const serviceStore = useServices();
+const setupStore = useSetups();
+const manageStore = useNodeManage();
+const allServices = ref([]);
+
+const getServerServices = computed(() => {
+  const newConfigServices = new Set(manageStore.newConfiguration.map((e) => e.service));
+  const serverServices = new Set(setupStore.serverServices.map((e) => e));
+
+  return allServices.value
+    .filter((e) => e.category === "service" && serverServices.has(e.service))
+    .map((service) => ({
+      ...service,
+      isDuplicated: newConfigServices.has(service.service),
+    }))
+    .sort((a, b) => a.name.localeCompare(b.name));
+});
+
+onMounted(() => {
+  allServices.value = serviceStore.allServices
+    .filter((e) => e.category === "service")
+    .map((e) => ({ ...e, isDuplicated: false }));
+});
+
+// Methods
+const importSetup = () => {
+  emit("importSetup");
+};
+
+const createSetup = () => {
+  emit("createSetup");
+};
+
+const addService = (service) => {
+  emit("addService", service);
+};
+</script>

launcher/src/components/UI/edit-page/components/drawer/ServicesDrawer.vue

@@ -0,0 +1,133 @@
+<template>
+  <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"
+      >ADD A CONFIG SERVICE</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"
+    >
+      <label for="Search" class="sr-only"> {{ $t("multiServer.serch") }} </label>
+
+      <input
+        id="Search"
+        v-model="searchQuery"
+        type="text"
+        :placeholder="`${$t('multiServer.serchFor')}`"
+        class="w-full h-full rounded-md border-gray-200 py-2.5 pe-10 shadow-sm sm:text-sm px-2"
+      />
+
+      <span class="absolute inset-y-0 end-0 grid w-10 place-content-center">
+        <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"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+            />
+          </svg>
+        </button>
+      </span>
+    </div>
+
+    <div
+      class="col-start-1 col-span-full row-start-4 row-end-14 w-full h-full flex flex-col justify-start items-center space-y-1 bg-[#151618] border border-gray-700 rounded-md overflow-y-scroll py-1 overflow-x-hidden"
+    >
+      <div
+        v-for="service in filteredServices"
+        :key="service.service"
+        class="w-full h-10 border border-gray-800 rounded-sm cursor-pointer grid grid-cols-5 p-1 hover:bg-gray-700 transition-all duration-100"
+        draggable="true"
+        @dragstart="dragStart($event, service)"
+        @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
+        >
+      </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"
+        >CUSTOM SERVICE</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"
+        @click="addServices(customService)"
+      >
+        <span class="text-sm text-gray-200"> Create </span>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import DrawerFilter from "./DrawerFilter.vue";
+import { useServices } from "@/store/services";
+import { useFooter } from "@/store/theFooter";
+import i18n from "@/includes/i18n";
+import { computed, onUnmounted, ref } from "vue";
+import { useSetups } from "../../../../../store/setups";
+
+const t = i18n.global.t;
+
+const serv = t("serviceLay.srvice");
+const searchQuery = ref("");
+
+const footerStore = useFooter();
+const serviceStore = useServices();
+const setupStore = useSetups();
+const props = defineProps({
+  dragging: Function,
+});
+
+// eslint-disable-next-line vue/no-setup-props-destructure
+const dragStart = props.dragging;
+
+const emit = defineEmits(["addServices", "startDrag"]);
+
+const filteredServices = computed(() => {
+  return serviceStore.filteredServices
+    .filter((service) => {
+      return !setupStore.serverServices.includes(service.service);
+    })
+    .filter((service) => {
+      return service.service !== "CustomService";
+    })
+    .filter((service) => {
+      return service.name.toLowerCase().includes(searchQuery.value.toLowerCase());
+    });
+});
+
+const customService = computed(() => {
+  return serviceStore.allServices.find((service) => service.service === "CustomService");
+});
+
+const addServices = (service) => {
+  emit("addServices", service);
+};
+
+onUnmounted(() => {
+  searchQuery.value = "";
+});
+</script>

launcher/src/components/UI/edit-page/components/drawer/SetupsDrawer.vue

@@ -0,0 +1,71 @@
+<template>
+  <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-2"
+  >
+    <div
+      class="col-start-1 col-span-full row-start-1 row-span-1 w-full h-full bg-[#151618] rounded-md p-1 flex justify-center items-center"
+    >
+      <div class="w-full h-full rounded-sm flex justify-center items-center">
+        <span
+          class="text-sm text-center text-gray-100 font-normal font-sans uppercase mt-1"
+          >Select A Network</span
+        >
+      </div>
+    </div>
+    <div
+      class="col-start-1 col-span-full row-start-2 row-end-14 w-full h-full bg-[#1d1f21] rounded-md grid grid-cols-2 grid-rows-12"
+    >
+      <div
+        class="col-start-1 col-span-full row-start-1 row-span-full bg-black rounded-b-md flex flex-col justify-start items-center p-1 overflow-x-hidden overflow-y-auto space-y-1 border border-gray-700 scrollbar scrollbar-thumb-gray-500 scrollbar-track-gray-800"
+      >
+        <div
+          v-for="network in manageStore.networkList"
+          :key="network"
+          class="w-full h-7 bg-[#282a2c] rounded-sm border border-gray-500 items-center mx-auto cursor-pointer hover:bg-gray-700 transition-all duration-100 grid grid-cols-5"
+          @click="getNetwork(network)"
+        >
+          <img
+            class="col-start-1 col-span-1 w-5 self-center mx-auto"
+            :src="network.icon"
+            alt="Network"
+          />
+          <span
+            class="col-start-2 col-span-full text-left text-xs font-sans text-gray-200 ml-1"
+            >{{ network?.name }}
+          </span>
+        </div>
+      </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-2xs text-center text-gray-100 font-semibold font-sans uppercase mt-1"
+        >Create Custom Setup</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"
+        @click="createCustom"
+      >
+        <span class="text-sm text-gray-200 uppercase">Custom Setup</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useNodeManage } from "../../../../../store/nodeManage";
+
+const emit = defineEmits(["getNetwork", "createCustom"]);
+const manageStore = useNodeManage();
+
+const getNetwork = (network) => {
+  emit("getNetwork", network);
+};
+
+const createCustom = () => {
+  emit("createCustom");
+};
+</script>

launcher/src/components/UI/edit-page/components/edit/ConfigBody.vue

@@ -0,0 +1,168 @@
+<template>
+  <div
+    class="w-full h-full max-h-[430px] rounded-md border overflow-hidden bg-[#151618] relative"
+    :class="[
+      isOverDropZone ? 'border-dashed border-2 border-blue-500 ' : 'border-gray-600',
+      manageStore.disableConfirmButton ? 'opacity-70 pointer-events-none' : '',
+      setupStore.isEditConfigViewActive
+        ? 'animate__animated animate__fadeIn animate__faster'
+        : 'animate__animated animate__fadeOut animate__faster',
+    ]"
+  >
+    <div
+      class="absolute top-0 w-full mx-auto grid grid-cols-3 h-6 border border-gray-950 rounded-t-[5px] text-xs font-[400] font-sans"
+      :class="[
+        setupStore.getBGColor(setupStore.selectedSetup?.color),
+        setupStore.getTextColor(setupStore.selectedSetup?.color),
+      ]"
+    >
+      <span class="col-start-1 justify-self-center self-center">{{
+        $t("editBody.executionClient")
+      }}</span>
+      <span class="col-start-2 justify-self-center self-center">{{
+        $t("editBody.consensusClient")
+      }}</span>
+      <span class="col-start-3 justify-self-center self-center">{{
+        $t("editBody.validator")
+      }}</span>
+    </div>
+    <div
+      ref="dropZoneRef"
+      class="w-full h-full max-h-[428px] grid grid-cols-3 pt-5 z-10"
+      :class="{
+        'scrollbar scrollbar-rounded-* scrollbar-thumb-teal-800 scrollbar-track-transparent overflow-y-auto': activateScrollBar,
+      }"
+      @drop="onDrop($event)"
+      @dragover.prevent="isOverDropZone = true"
+      @dragleave.prevent="isOverDropZone = false"
+    >
+      <span
+        v-if="isOverDropZone"
+        class="col-start-2 col-span-1 self-center justify-self-center flex justify-center items-center text-xl text-blue-400"
+        >+</span
+      >
+      <ExecutionClients
+        v-if="!isOverDropZone"
+        @delete-service="deleteService"
+        @switch-client="switchClient"
+        @confirm-consensus="confirmConsensus"
+        @info-modal="infoModal"
+        @mouse-over="lineDraw"
+        @mouse-leave="removeLines"
+      />
+
+      <ConsensusClients
+        v-if="!isOverDropZone"
+        @delete-service="deleteService"
+        @confirm-connection="confirmConnection"
+        @switch-client="switchClient"
+        @modify-service="modifyService"
+        @info-modal="infoModal"
+        @mouse-over="lineDraw"
+        @mouse-leave="removeLines"
+      />
+      <ValidatorClients
+        v-if="!isOverDropZone"
+        @delete-service="deleteService"
+        @switch-client="switchClient"
+        @modify-service="modifyService"
+        @info-modal="infoModal"
+        @mouse-over="lineDraw"
+        @mouse-leave="removeLines"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import ConsensusClients from "./clients/ConsensusClients.vue";
+import ExecutionClients from "./clients/ExecutionClients.vue";
+import ValidatorClients from "./clients/ValidatorClients.vue";
+
+import { useNodeManage } from "@/store/nodeManage";
+import { computed, onMounted, ref, watch } from "vue";
+import { useSetups } from "../../../../../store/setups";
+import { useMultiSetups } from "../../../../../composables/multiSetups";
+
+const emit = defineEmits([
+  "onDrop",
+  "confirmConnection",
+  "switchClient",
+  "deleteService",
+  "confirmConsensus",
+  "infoModal",
+  "modifyService",
+  "removeLines",
+  "lineDraw",
+]);
+
+const manageStore = useNodeManage();
+const setupStore = useSetups();
+const { updateDom } = useMultiSetups();
+
+const isOverDropZone = ref(false);
+
+const activateScrollBar = computed(() => {
+  const validators = manageStore.newConfiguration.filter(
+    (service) => service.category === "validator"
+  );
+  const consensus = manageStore.newConfiguration.filter(
+    (service) => service.category === "consensus"
+  );
+  const execution = manageStore.newConfiguration.filter(
+    (service) => service.category === "execution"
+  );
+  return !!(validators.length > 3 || consensus.length > 3 || execution.length > 3);
+});
+
+//Update selected setup
+watch(
+  () => manageStore.newConfiguration,
+  () => {
+    updateDom();
+  }
+);
+
+//Lifecycle Hooks
+onMounted(() => {
+  updateDom();
+});
+
+// Methods
+
+const removeLines = () => {
+  emit("removeLines");
+};
+
+const lineDraw = (service) => {
+  emit("lineDraw", service);
+};
+
+const onDrop = (event) => {
+  emit("onDrop", event);
+};
+
+const deleteService = (service) => {
+  emit("deleteService", service);
+};
+
+const switchClient = (service) => {
+  emit("switchClient", service);
+};
+
+const confirmConsensus = (service) => {
+  emit("confirmConsensus", service);
+};
+
+const confirmConnection = (service) => {
+  emit("confirmConnection", service);
+};
+
+const infoModal = (service) => {
+  emit("infoModal", service);
+};
+
+const modifyService = (service) => {
+  emit("modifyService", service);
+};
+</script>

launcher/src/components/UI/edit-page/components/edit/EditHeader.vue

@@ -1,33 +1,51 @@
 <template>
   <div class="w-full h-[55px] grid grid-cols-9 gap-1 py-1">
     <ServerDetails />
-
-    <ConfigDetails :list="configsToDisplay" />
-
+    <SetupDetails
+      :list="setupsList"
+      @select-rename="selectRename"
+      @confirm-rename="confirmRename"
+      @select-setup="selectSetup"
+      @server-view="serverView"
+    />
     <NetworkDetails />
   </div>
 </template>
+
 <script setup>
-import { useNodeManage } from "@/store/nodeManage";
-import ServerDetails from "./ServerDetails.vue";
-import NetworkDetails from "./NetworkDetails.vue";
-import ConfigDetails from "./ConfigDetails.vue";
+import { useMultiSetups } from "@/composables/multiSetups";
+import { useSetups } from "@/store/setups";
 import { computed } from "vue";
-import { useRoute } from "vue-router";
-
-const nodeStore = useNodeManage();
-const route = useRoute();
-
-const configsToDisplay = computed(() => {
-  let configs;
-  if (route.path === "/node") {
-    configs = nodeStore.nodeConfigs;
-  } else {
-    configs = nodeStore.nodeConfigs.slice(0, 4);
-  }
-  return configs;
+import NetworkDetails from "./header/NetworkDetails.vue";
+import ServerDetails from "./header/ServerDetails.vue";
+import SetupDetails from "./header/SetupDetails.vue";
+
+const emit = defineEmits(["selectRename", "confirmRename"]);
+const setupStore = useSetups();
+
+const { getSelectedSetup, getServerView } = useMultiSetups();
+
+const setupsList = computed(() => {
+  return setupStore.editSetups;
 });
+
+const selectRename = (setup) => {
+  emit("selectRename", setup);
+};
+
+const confirmRename = () => {
+  emit("confirmRename");
+};
+
+const selectSetup = (setup) => {
+  getSelectedSetup(setup, true);
+};
+
+const serverView = () => {
+  getServerView();
+};
 </script>
+
 <style scoped>
 .fade-move,
 .fade-enter-active,

launcher/src/components/UI/edit-page/components/edit/SetupBody.vue

@@ -0,0 +1,64 @@
+<template>
+  <div
+    class="w-full h-full max-h-[430px] rounded-md border border-gray-600 overflow-hidden mt-1 bg-[#151618] relative"
+    :class="[
+      manageStore.disableConfirmButton ? 'opacity-70 pointer-events-none' : '',
+      setupStore.isEditConfigViewActive
+        ? 'animate__animated animate__fadeOut animate__faster'
+        : 'animate__animated animate__fadeIn animate__faster',
+    ]"
+  >
+    <div class="w-full h-full max-h-full rounded-md grid grid-cols-24 grid-rows-12">
+      <div
+        class="col-start-1 col-span-full row-start-1 row-span-1 w-full mx-auto h-6 bg-[#33393E] border border-gray-950 rounded-t-[5px] flex justify-center items-center overflow-hidden"
+      >
+        <span class="text-xs text-gray-300 text-center font-sans">All Setups</span>
+      </div>
+      <div
+        class="w-full h-full col-start-1 col-span-full row-start-2 row-span-full grid grid-cols-3 grid-rows-3 scrollbar scrollbar-rounded-* scrollbar-thumb-teal-800 scrollbar-track-transparent overflow-y-auto overflow-x-hidden items-start"
+      >
+        <SingleSetup
+          v-for="setup in getEditSetups.filter((s) => s.setupName !== 'commonServices')"
+          :key="setup.setupName"
+          :setup="setup"
+          @delete-setup="deleteSetup"
+          @connect-setup="connectSetup"
+          @info-modal="infoModal"
+          @open-configs="openConfigs"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useNodeManage } from "@/store/nodeManage";
+import { computed } from "vue";
+import { useSetups } from "../../../../../store/setups";
+import SingleSetup from "./setups/SingleSetup.vue";
+
+const emit = defineEmits(["deleteSetup", "connectSetup", "setupInfos", "openConfigs"]);
+
+const manageStore = useNodeManage();
+const setupStore = useSetups();
+
+const getEditSetups = computed(() => {
+  return setupStore.editSetups;
+});
+
+const deleteSetup = (item) => {
+  emit("deleteSetup", item);
+};
+
+const connectSetup = (item) => {
+  emit("connectSetup", item);
+};
+
+const infoModal = (item) => {
+  emit("setupInfos", item);
+};
+
+const openConfigs = (item) => {
+  emit("openConfigs", item);
+};
+</script>

launcher/src/components/UI/edit-page/components/edit/SyncCarousel.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="relative w-full h-[60px] col-start-5 col-end-13 flex justify-center items-center gap-x-2">
+  <div
+    class="relative w-full h-[60px] col-start-5 col-end-13 flex justify-center items-center gap-x-2"
+  >
     <Carousel
       ref="carousel"
       v-model="currentSlide"
@@ -14,10 +16,17 @@
           class="w-11/12 h-full bg-[#33393e] flex justify-center items-center border border-gray-600 rounded-lg"
           :style="{ 'pointer-events': getCategory === 'execution' ? 'none' : '' }"
         >
-          <div v-if="item.name === 'genesis'" class="w-full h-full flex justify-evenly items-center p-1">
-            <div class="w-full h-full flex flex-col justify-evenly items-center text-gray-400 p-1">
+          <div
+            v-if="item.name === 'genesis'"
+            class="w-full h-full flex justify-evenly items-center p-1"
+          >
+            <div
+              class="w-full h-full flex flex-col justify-evenly items-center text-gray-400 p-1"
+            >
               <span class="w-full font-semibold text-md uppercase">{{ item.name }}</span>
-              <span class="w-full font-semibold text-md uppercase text-teal-600">{{ item.type }}</span>
+              <span class="w-full font-semibold text-md uppercase text-teal-600">{{
+                item.type
+              }}</span>
             </div>
           </div>
           <div
@@ -26,7 +35,9 @@
           >
             <div class="w-1/3 h-full flex flex-col justify-evenly items-center">
               <span class="text-sm text-gray-400 capitalize">{{ item.name }}</span>
-              <span class="text-xs font-semibold uppercase text-teal-600">{{ item.type }}</span>
+              <span class="text-xs font-semibold uppercase text-teal-600">{{
+                item.type
+              }}</span>
             </div>
             <div class="w-2/3 h-full cursor-pointer">
               <input
@@ -43,7 +54,9 @@
           >
             <div class="w-1/3 h-full flex flex-col justify-evenly items-center">
               <span class="text-sm text-gray-400 capitalize">{{ item.name }}</span>
-              <span class="text-xs font-semibold uppercase text-teal-600">{{ item.type }}</span>
+              <span class="text-xs font-semibold uppercase text-teal-600">{{
+                item.type
+              }}</span>
             </div>
 
             <div class="w-2/3 h-full cursor-pointer p-1">
@@ -61,14 +74,22 @@
                 <div v-if="selectedIcon !== ''" class="w-1/6" @click="openDropdown">
                   <img class="w-5 h-6 ml-2" :src="selectedIcon" :alt="selectedItem" />
                 </div>
-                <div v-if="selectedIcon !== ''" class="w-4/6 text-md text-gray-300 font-semibold" @click="openDropdown">
+                <div
+                  v-if="selectedIcon !== ''"
+                  class="w-4/6 text-md text-gray-300 font-semibold"
+                  @click="openDropdown"
+                >
                   {{ selectedItem }}
                 </div>
                 <div v-else class="w-4/6 text-gray-500 text-sm" @click="openDropdown">
                   {{ selectedItem }}
                 </div>
                 <div class="w-1/6" @click="openWindow">
-                  <img class="w-6" src="/img/icon/service-modals-icons/internet.png" alt="Internet" />
+                  <img
+                    class="w-6"
+                    src="/img/icon/service-modals-icons/internet.png"
+                    alt="Internet"
+                  />
                 </div>
               </div>
             </div>
@@ -143,7 +164,10 @@ const getCategory = computed(() => {
 
 // Watchers
 watch(currentSlide, (val) => {
-  if (router.currentRoute.value.path === "/sync" || router.currentRoute.value.path === "/importingSyncing") {
+  if (
+    router.currentRoute.value.path === "/sync" ||
+    router.currentRoute.value.path === "/importingSyncing"
+  ) {
     if (val !== prevVal.value) {
       prevVal.value = val;
       installStore.checkPointSync = "";
@@ -167,7 +191,7 @@ onBeforeMount(() => {
 });
 
 onMounted(() => {
-  manageStore.currentNetwork = manageStore.currentNetwork.hasOwnProperty("id")
+  manageStore.currentNetwork = manageStore.currentNetwork?.hasOwnProperty("id")
     ? manageStore.currentNetwork
     : manageStore.configNetwork;
   setSelectedLinks();

launcher/src/components/UI/edit-page/components/edit/ConsensusClients.vue → launcher/src/components/UI/edit-page/components/edit/clients/ConsensusClients.vue

@@ -37,6 +37,7 @@ import ClientLayout from "./ClientLayout.vue";
 import GeneralMenu from "./GeneralMenu.vue";
 
 import { computed } from "vue";
+import { useSetups } from "../../../../../../store/setups";
 
 //Props & Emits
 const emit = defineEmits([
@@ -51,23 +52,22 @@ const emit = defineEmits([
 //Refs
 
 const manageStore = useNodeManage();
+const setupStore = useSetups();
 
 // computed & watchers properties
 const getConsensus = computed(() => {
-  return manageStore.newConfiguration
-    .filter((e) => e.category == "consensus")
+  const services = manageStore.newConfiguration
+    .filter(
+      (s) => s.setupId === setupStore.selectedSetup?.setupId && s.category === "consensus"
+    )
     .sort((a, b) => {
-      let fa = a.name.toLowerCase(),
-        fb = b.name.toLowerCase();
-
-      if (fa < fb) {
-        return -1;
-      }
-      if (fa > fb) {
-        return 1;
-      }
-      return 0;
+      const fa = a.name.toLowerCase();
+      const fb = b.name.toLowerCase();
+
+      return fa < fb ? -1 : fa > fb ? 1 : 0;
     });
+
+  return services;
 });
 
 // methods

launcher/src/components/UI/edit-page/components/edit/ExecutionClients.vue → launcher/src/components/UI/edit-page/components/edit/clients/ExecutionClients.vue

@@ -36,26 +36,24 @@ import ClientLayout from "./ClientLayout.vue";
 import GeneralMenu from "./GeneralMenu.vue";
 
 import { computed } from "vue";
+import { useSetups } from "../../../../../../store/setups";
 
 const emit = defineEmits(["deleteService", "switchClient", "connectClient", "infoModal", "mouseOver", "mouseLeave"]);
 const manageStore = useNodeManage();
 const serviceStore = useServices();
+const setupStore = useSetups();
 
 const getExecutions = computed(() => {
-  return manageStore.newConfiguration
-    .filter((e) => e.category == "execution")
+  const services = manageStore.newConfiguration
+    .filter((s) => s.category === "execution" && s.setupId === setupStore.selectedSetup.setupId)
     .sort((a, b) => {
-      let fa = a.name.toLowerCase(),
-        fb = b.name.toLowerCase();
-
-      if (fa < fb) {
-        return -1;
-      }
-      if (fa > fb) {
-        return 1;
-      }
-      return 0;
+      const fa = a.name.toLowerCase();
+      const fb = b.name.toLowerCase();
+
+      return fa < fb ? -1 : fa > fb ? 1 : 0;
     });
+
+  return services;
 });
 
 // Methods

launcher/src/components/UI/edit-page/components/edit/ValidatorClients.vue → launcher/src/components/UI/edit-page/components/edit/clients/ValidatorClients.vue

@@ -5,7 +5,7 @@
   >
     <div
       v-for="item in getValidators"
-      :key="item"
+      :key="item.name"
       :ref="
         (el) => {
           item.ref = el;
@@ -34,50 +34,52 @@
 
 <script setup>
 import { useNodeManage } from "@/store/nodeManage";
+import { computed } from "vue";
+import { useSetups } from "@/store/setups";
 import ClientLayout from "./ClientLayout.vue";
-
 import GeneralMenu from "./GeneralMenu.vue";
-import { computed } from "vue";
 
-// Variables & Constants
-
-const emit = defineEmits(["deleteService", "switchClient", "modifyService", "infoModal", "mouseOver", "mouseLeave"]);
+const emit = defineEmits([
+  "deleteService",
+  "switchClient",
+  "modifyService",
+  "infoModal",
+  "mouseOver",
+  "mouseLeave",
+]);
 
 const manageStore = useNodeManage();
+const setupStore = useSetups();
 
-// Computed & Watchers
-
+// Use computed for reactivity
 const getValidators = computed(() => {
-  let service;
-  service = manageStore.newConfiguration
-    .filter((e) => e.category == "validator")
+  const services = manageStore.newConfiguration
+    .filter(
+      (s) => s.setupId === setupStore.selectedSetup?.setupId && s.category === "validator"
+    )
     .sort((a, b) => {
-      let fa = a.name.toLowerCase(),
-        fb = b.name.toLowerCase();
-
-      if (fa < fb) {
-        return -1;
-      }
-      if (fa > fb) {
-        return 1;
-      }
-      return 0;
+      const fa = a.name.toLowerCase();
+      const fb = b.name.toLowerCase();
+
+      return fa < fb ? -1 : fa > fb ? 1 : 0;
     });
-  return service;
+
+  return services;
 });
 
+// Methods
 const getDynamicClasses = (item) => {
   if (item.hasOwnProperty("isRemoveProcessing") && item.isRemoveProcessing) {
     return "border bg-red-600 border-white hover:bg-red-600";
   } else if (item.hasOwnProperty("isNewClient") && item.isNewClient) {
-    return "opacity-50 cursor-not-allowed pointer-events-none bg-[#212629]  border border-gray-700";
+    return "opacity-50 cursor-not-allowed pointer-events-none bg-[#212629] border border-gray-700";
   } else if (item.hasOwnProperty("modifierPanel") && item.modifierPanel) {
-    return "opacity-50 cursor-not-allowed pointer-events-none bg-[#212629]  border border-gray-700";
+    return "opacity-50 cursor-not-allowed pointer-events-none bg-[#212629] border border-gray-700";
   } else {
     return "bg-[#212629] hover:bg-[#374045] border border-gray-700";
   }
 };
-// Methods
+
 const displayMenu = (item) => {
   manageStore.newConfiguration.forEach((service) => {
     service.displayPluginMenu = false;
@@ -123,6 +125,7 @@ const infoModal = (item) => {
   emit("infoModal", item);
 };
 </script>
+
 <style scoped>
 .slide-fade-enter-active {
   transition: all 0.3s ease-out;

launcher/src/components/UI/edit-page/components/edit/header/NetworkDetails.vue

@@ -0,0 +1,93 @@
+<template>
+  <div
+    class="col-start-7 col-span-3 flex flex-col justify-between items-center bg-[#151618] border h-full border-gray-600 rounded-md px-2 py-1"
+    style="cursor: default"
+    @mouseenter="footerStore.cursorLocation = `${currIs} ${network}`"
+    @mouseleave="footerStore.cursorLocation = ''"
+  >
+    <div
+      v-if="setupStore.isConfigViewActive || setupStore.isEditConfigViewActive"
+      class="w-full self-start text-xs font-semibold text-teal-700"
+    >
+      {{ t("networkDetails.currentNet") }}
+    </div>
+    <div
+      v-else
+      class="w-full self-start text-xs font-semibold text-teal-700 overflow-hidden"
+    >
+      TOTAL SETUPS ON SERVER
+    </div>
+    <div
+      v-if="setupStore.isConfigViewActive || setupStore.isEditConfigViewActive"
+      class="w-full flex justify-center items-center"
+    >
+      <img
+        v-if="getSetupNetwork"
+        :src="getSetupNetwork?.icon"
+        alt="Networks"
+        class="w-5 mr-1"
+      />
+      <span class="text-md text-gray-300 text-left overflow-hidden whitespace-pre">{{
+        getSetupNetwork?.name
+      }}</span>
+    </div>
+    <div v-else class="w-full flex justify-center items-center">
+      <span class="text-md text-gray-300 text-left overflow-hidden whitespace-pre">{{
+        totalNetworks
+      }}</span>
+    </div>
+  </div>
+</template>
+<script setup>
+import { useNodeManage } from "@/store/nodeManage";
+import { computed } from "vue";
+import { useFooter } from "@/store/theFooter";
+import i18n from "@/includes/i18n";
+import { useSetups } from "@/store/setups";
+
+const t = i18n.global.t;
+
+const currIs = t("networkDetails.currIs");
+
+const footerStore = useFooter();
+const manageStore = useNodeManage();
+const setupStore = useSetups();
+
+const totalNetworks = computed(() => {
+  return (
+    setupStore.allSetups
+      .filter((setup) => setup.setupName !== "commonServices")
+      .map((setup) => setup).length || 0
+  );
+});
+
+const getSetupNetwork = computed(() => {
+  let setupNet;
+  const net = setupStore.selectedSetup?.network;
+  if (net) {
+    setupNet = manageStore.networkList.find((network) => network.network === net);
+  }
+  return setupNet;
+});
+</script>
+
+<style scoped>
+.fade-move,
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+/* 2. declare enter from and leave to state */
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: scaleY(0.01) translate(30px, 0);
+}
+
+/* 3. ensure leaving items are taken out of layout flow so that moving
+      animations can be calculated correctly. */
+.fade-leave-active {
+  position: absolute;
+}
+</style>

launcher/src/components/UI/edit-page/components/edit/ServerDetails.vue → launcher/src/components/UI/edit-page/components/edit/header/ServerDetails.vue

@@ -4,29 +4,36 @@
     style="cursor: default"
   >
     <div
-      class="w-full flex justify-center items-center px-2 h-[25px]"
+      class="w-full px-2 h-[25px] grid grid-cols-24 items-center"
       @mouseenter="footerStore.cursorLocation = `${machineName}`"
       @mouseleave="footerStore.cursorLocation = ''"
     >
-      <span class="text-md font-semibold ml-1 text-yellow-500 overflow-hidden whitespace-pre text-center">{{
-        controlStore.ServerName
-      }}</span>
+      <span
+        class="col-start-2 col-end-8 text-xs text-left text-gray-100 overflow-hidden whitespace-pre ml-[5px]"
+        >Mach</span
+      >
+      <span
+        class="col-start-8 col-span-full text-md text-yellow-500 overflow-hidden whitespace-pre"
+        >{{ controlStore.ServerName }}</span
+      >
     </div>
     <div
       v-if="controlStore.ipAddress"
-      class="w-full px-2 h-[25px] grid grid-cols-12 items-center"
+      class="w-full px-2 h-[25px] grid grid-cols-24 items-center"
       @mouseenter="footerStore.cursorLocation = `${machineIp}`"
       @mouseleave="footerStore.cursorLocation = ''"
     >
-      <span class="col-start-2 col-span-1 text-xs text-left text-gray-100 overflow-hidden whitespace-pre ml-[5px]"
-        >IP :</span
+      <span
+        class="col-start-2 col-end-7 text-xs text-left text-gray-100 overflow-hidden whitespace-pre ml-[5px]"
+        >IP
+      </span>
+      <span
+        class="col-start-8 col-end-22 text-sm text-yellow-500 overflow-hidden whitespace-pre"
+        >{{ controlStore.ipAddress }}</span
       >
-      <span class="col-start-4 col-end-12 text-sm text-yellow-500 overflow-hidden whitespace-pre">{{
-        controlStore.ipAddress
-      }}</span>
 
       <img
-        class="w-7 col-start-12 col-span-1 cursor-pointer hover:scale-110 active:scale-95 transition-all duration-200 ease-in-out"
+        class="w-7 col-start-23 col-span-full cursor-pointer hover:scale-110 active:scale-95 transition-all duration-200 ease-in-out"
         src="/img/icon/service-modals-icons/copy.png"
         alt="icon"
         @click="copyServerIp"

launcher/src/components/UI/edit-page/components/edit/header/SetupDetails.vue

@@ -0,0 +1,40 @@
+<template>
+  <div
+    class="col-start-4 col-end-7 grid grid-cols-6 gap-1 items-center bg-[#151618] border h-full border-gray-600 rounded-md p-2"
+  >
+    <SetupDropdown
+      :list="props.list"
+      @select-rename="selectRename"
+      @confirm-rename="confirmRename"
+      @select-setup="selectSetup"
+      @server-view="serverView"
+    />
+  </div>
+</template>
+<script setup>
+import SetupDropdown from "../setups/SetupDropdown.vue";
+
+const props = defineProps({
+  list: {
+    type: Array,
+    required: true,
+  },
+});
+
+const emit = defineEmits(["selectRename", "confirmRename", "selectSetup", "serverView"]);
+
+const selectRename = (setup) => {
+  emit("selectRename", setup);
+};
+
+const confirmRename = () => {
+  emit("confirmRename");
+};
+
+const selectSetup = (setup) => {
+  emit("selectSetup", setup);
+};
+const serverView = () => {
+  emit("serverView");
+};
+</script>

launcher/src/components/UI/edit-page/components/edit/setups/RenameSetup.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="w-full h-full col-start-6 col-span-full flex justify-center items-center">
+    <div
+      v-if="setupStore.isRenameSetupActive"
+      class="w-full h-full col-start-6 col-span-1 flex justify-center items-center bg-teal-800 border border-gray-600 rounded-sm p-[2px]"
+      @click="confirmRename"
+      @mouseenter="footerStore.cursorLocation = 'Rename Node Setup'"
+      @mouseleave="footerStore.cursorLocation = ''"
+    >
+      <img
+        class="w-5 hover:scale-105 active:scale-95 cursor-pointer transition-all duration-150"
+        src="/img/icon/service-setting-icons/confirm.png"
+        alt="Avatar"
+      />
+    </div>
+    <div
+      v-else
+      class="w-full h-full col-start-6 col-span-1 flex justify-center items-center bg-[#333539] border border-gray-600 rounded-sm p-[2px]"
+      :class="{
+        'pointer-events-none opacity-45 ': setupStore.selectedSetup === null,
+      }"
+      @click="renameSetup"
+      @mouseenter="footerStore.cursorLocation = 'Rename Node Setup'"
+      @mouseleave="footerStore.cursorLocation = ''"
+    >
+      <img
+        class="w-5 hover:scale-105 active:scale-95 cursor-pointer transition-all duration-150"
+        src="/img/icon/edit-node-icons/rename.png"
+        alt="Icon"
+        @mousedown.prevent
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useFooter } from "@/store/theFooter";
+import { useSetups } from "@/store/setups";
+
+const emit = defineEmits(["renameSetup", "confirmRename"]);
+
+const setupStore = useSetups();
+const footerStore = useFooter();
+
+const renameSetup = () => {
+  emit("renameSetup");
+};
+
+const confirmRename = () => {
+  emit("confirmRename");
+};
+</script>

launcher/src/components/UI/edit-page/components/edit/setups/SetupDropdown.vue

@@ -0,0 +1,209 @@
+<template>
+  <div
+    class="w-full relative col-start-1 col-span-full grid grid-cols-6 gap-x-1"
+    :class="newHeight"
+  >
+    <label
+      v-if="setupStore.isRenameSetupActive && route.path === '/edit'"
+      for="rename"
+      class="w-full h-full col-start-1 col-end-6 text-gray-800 bg-[#232528] rounded-sm border border-gray-600 flex justify-center items-center"
+    >
+      <input
+        id="rename"
+        v-model="setupStore.setupToRename"
+        type="text"
+        class="w-full h-full pl-2 bg-[#232528] text-gray-200 text-xs"
+        focusable
+      />
+    </label>
+
+    <!-- Dropdown toggle button -->
+
+    <div
+      v-else
+      class="col-start-1 relative p-1 grid rounded-[4px] border border-gray-600"
+      :class="
+        route.path === '/edit' ? 'col-end-6 grid-cols-9' : 'col-span-full  grid-cols-12'
+      "
+      @click="toggleDropdown"
+    >
+      <span
+        v-if="setupStore.selectedSetup !== null && setupStore.selectedSetup?.isActive"
+        class="col-start-1 col-span-1 w-4 h-4 rounded-full self-center justify-self-center shadow-sm shadow-black"
+        :class="setupStore.getBGColor(setupStore.selectedSetup?.color)"
+      ></span>
+      <img
+        v-else
+        class="col-start-1 col-span-1 w-4 h-4 rounded-full self-center justify-self-center shadow-sm shadow-black"
+        src="/img/icon/stereum-icons/stereum-logo.png"
+        alt="Server View"
+      />
+      <span
+        class="self-center col-start-2 text-sm font-sans font-[500] overflow-hidden truncate text-gray-200 ml-2"
+        :class="route.path === '/edit' ? 'col-end-9' : 'col-end-11'"
+        >{{ getSelectedOption }}</span
+      >
+
+      <svg
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        class="h-3 w-3 text-white self-center col-span-1 transform transition-transform duration-200 ease-in-out"
+        :class="[
+          isOpen ? 'rotate-180' : 'rotate-0',
+          route.path === '/edit' ? 'col-start-9' : 'col-start-12',
+        ]"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M19 9l-7 7-7-7"
+        />
+      </svg>
+    </div>
+
+    <!-- Dropdown menu -->
+    <Transition
+      enter-active-class="transform transition duration-500 ease-custom"
+      enter-class="-translate-y-1/2 scale-y-0 opacity-0"
+      enter-to-class="translate-y-0 scale-y-100 opacity-100"
+      leave-active-class="transform transition duration-300 ease-custom"
+      leave-class="translate-y-0 scale-y-100 opacity-100"
+      leave-to-class="-translate-y-1/2 scale-y-0 opacity-0"
+    >
+      <div
+        v-if="isOpen"
+        class="absolute top-9 z-20 min-h-20 mt-1 origin-top-right rounded-sm shadow-md bg-gray-200 transition-all duration-100 divide-y-2 divide-gray-500 shadow-black"
+        :class="getDropdownWidth"
+        @mouseleave="isOpen = false"
+      >
+        <div
+          v-if="setupStore.isConfigViewActive || setupStore.isEditConfigViewActive"
+          class="p-2 bg-gray-300 capitalize transition-colors duration-300 transform text-[#336666] hover:bg-blue-300 cursor-pointer grid grid-cols-6 items-center"
+          @click="selectServerView"
+        >
+          <img
+            class="col-start-1 col-span-1 w-5 h-5 rounded-full border border-gray-300 self-center bg-gray-100"
+            src="/img/icon/stereum-icons/stereum-logo.png"
+            alt="Node Server View"
+          />
+          <span
+            class="col-start-2 col-span-full self-center text-left text-sm font-semibold overflow-hidden truncate font-sans"
+            >Server View</span
+          >
+        </div>
+        <div
+          v-for="setup in list.filter((s) => s.setupName !== 'commonServices')"
+          v-show="setup.setupId !== setupStore.selectedSetup?.setupId"
+          :key="setup.setupName"
+          class="p-2 bg-gray-300 capitalize transition-colors duration-300 transform text-gray-600 hover:bg-blue-300 hover:text-gray-700 cursor-pointer text-sm font-bold overflow-hidden truncate grid grid-cols-6 gap-x-1"
+          @click="selectSetup(setup)"
+        >
+          <span
+            class="col-start-1 col-span-1 w-5 h-5 rounded-full border border-gray-300 self-center justify-self-start"
+            :class="setupStore.getBGColor(setup.color)"
+          ></span>
+          <span
+            class="col-start-2 col-span-full self-center text-sm font-bold overflow-hidden truncate font-sans"
+            >{{ setup.setupName }}</span
+          >
+        </div>
+      </div>
+    </Transition>
+
+    <!-- Rename setup button -->
+    <!-- Rename Button  -->
+    <RenameSetup
+      v-if="route.path === '/edit'"
+      @confirm-rename="confirmRename"
+      @rename-setup="selectRename"
+    />
+  </div>
+</template>
+<script setup>
+import { useSetups } from "@/store/setups";
+import { computed, ref } from "vue";
+import { useRoute } from "vue-router";
+import RenameSetup from "./RenameSetup.vue";
+
+const { list, newHeight } = defineProps({
+  list: {
+    type: Array,
+    required: true,
+  },
+  newHeight: {
+    type: String,
+    required: false,
+    default: "h-full",
+  },
+});
+
+const emit = defineEmits(["selectRename", "selectSetup", "serverView", "confirmRename"]);
+
+const route = useRoute();
+const setupStore = useSetups();
+
+const isOpen = ref(false);
+
+const getDropdownWidth = computed(() => {
+  let width;
+  if (route.path === "/edit") {
+    width = "w-40 right-8";
+  } else if (route.path === "/node") {
+    width = "w-48 right-0";
+  } else if (route.path === "/staking") {
+    width = "w-52 right-1";
+  } else if (route.path === "/control") {
+    width = "w-44";
+  } else {
+    width = "w-48";
+  }
+  return width;
+});
+
+const getSelectedOption = computed(() => {
+  let option;
+  if (setupStore.selectedSetup === null) {
+    option = "Server View";
+  } else {
+    option = setupStore.selectedSetup?.setupName;
+  }
+
+  return option;
+});
+
+// Methods
+
+const toggleDropdown = () => {
+  isOpen.value = !isOpen.value;
+};
+
+const selectRename = () => {
+  if (setupStore.selectedSetup) {
+    emit("selectRename", setupStore.selectedSetup);
+  }
+};
+
+const confirmRename = () => {
+  setupStore.isRenameSetupActive = false;
+
+  emit("confirmRename");
+};
+
+const selectSetup = (setup) => {
+  isOpen.value = false;
+  emit("selectSetup", setup);
+};
+
+const selectServerView = () => {
+  isOpen.value = false;
+  emit("serverView");
+};
+</script>
+
+<style scoped>
+.ease-custom {
+  transition-timing-function: cubic-bezier(0.61, -0.53, 0.43, 1.43);
+}
+</style>

launcher/src/components/UI/edit-page/components/edit/setups/SetupLayout.vue

@@ -0,0 +1,67 @@
+<template>
+  <div
+    class="w-full h-full col-start-1 col-span-full row-start-3 row-span-full grid grid-cols-2 grid-rows-12 items-center"
+    :class="props.setup.isActive ? 'bg-black opacity-45 z-0 rounded-b-md' : ''"
+    @pointerdown.prevent.stop
+    @mousedown.prevent.stop
+    @mouseenter="
+      [
+        (footerStore.cursorLocation = `${props.setup.setupName}`),
+        (setupStore.isSetupMenuActive = true),
+      ]
+    "
+    @mouseleave="footerStore.cursorLocation = ''"
+  >
+    <img
+      class="max-h-[60px] col-start-1 col-span-full row-start-2 row-end-10 justify-self-center self-start mt-1"
+      :src="matchedNetworkIcon"
+      alt="icon"
+    />
+
+    <div
+      class="col-start-1 col-span-full row-start-10 row-span-full text-[8px] mt-2 text-center font-semibold overflow-hidden whitespace-nowrap truncate flex justify-center items-center text-gray-200"
+    >
+      <span>{{ NodeConfigName }}</span>
+    </div>
+  </div>
+</template>
+<script setup>
+import { computed } from "vue";
+import { useFooter } from "@/store/theFooter";
+import { useNodeManage } from "@/store/nodeManage";
+import { useSetups } from "../../../../../../store/setups";
+
+const footerStore = useFooter();
+const manageStore = useNodeManage();
+const setupStore = useSetups();
+
+const props = defineProps({
+  setup: Object,
+});
+
+// find the matching network and its icon
+const matchedNetworkIcon = computed(() => {
+  const matchedNetwork = manageStore.networkList.find(
+    (network) => network.network === props.setup.network
+  );
+
+  return matchedNetwork ? matchedNetwork.icon : "";
+});
+
+const NodeConfigName = computed(() => {
+  let shortName;
+  const matchedNetwork = manageStore.networkList.find(
+    (network) => network.network === props.setup.network
+  );
+
+  if (matchedNetwork?.network === "mainnet") {
+    shortName = "ETH NODE CONFIG";
+  } else if (matchedNetwork?.network === "holisky") {
+    shortName = "HLS NODE CONFIG";
+  } else if (matchedNetwork?.network === "optimism") {
+    shortName = "OPITMISM CONFIG";
+  }
+
+  return shortName;
+});
+</script>

launcher/src/components/UI/edit-page/components/edit/setups/SetupMenu.vue

@@ -0,0 +1,96 @@
+<template>
+  <div
+    class="absolute inset-0 w-full h-full flex justify-center items-center mx-auto mt-2"
+    @mousedown.prevent
+    @mouseleave="props.setup.isActive = false"
+  >
+    <div
+      class="w-20 h-20 bg-gray-700 border border-gray-600 p-1 rounded-md gap-1 z-10 grid grid-cols-2 grid-rows-2 items-center shadow-lg shadow-black overflow-hidden"
+    >
+      <img
+        v-for="icon in icons"
+        :key="icon.name"
+        class="w-8 col-span-1 bg-gray-900 hover:bg-gray-500 p-1 cursor-pointer active:scale-90 transition duration-200 border border-gray-700 rounded-md"
+        :src="icon.src"
+        :alt="`${icon.name} icon`"
+        @click="handleAction(icon.name)"
+        @mouseenter="footerStore.cursorLocation = `${icon.tooltip}`"
+        @mouseleave="footerStore.cursorLocation = ''"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useFooter } from "@/store/theFooter";
+
+// import i18n from "@/includes/i18n";
+
+// props & emits
+const props = defineProps({
+  setup: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(["deleteSetup", "connectSetup", "infoModal", "openConfigs"]);
+
+// const t = i18n.global.t;
+
+//Store
+const footerStore = useFooter();
+
+//Methods
+const handleAction = (item) => {
+  const action = icons.find((i) => i.name === item).action;
+
+  return action();
+};
+const deleteSetup = () => {
+  emit("deleteSetup", props.setup);
+  footerStore.cursorLocation = "";
+};
+
+const connectSetup = () => {
+  emit("connectSetup", props.setup);
+  footerStore.cursorLocation = "";
+};
+
+const infoModal = () => {
+  emit("infoModal", props.setup);
+  footerStore.cursorLocation = "";
+};
+
+const openConfigs = () => {
+  emit("openConfigs", props.setup);
+};
+
+// Now reference these functions in the icons array
+const icons = [
+  {
+    name: "connection",
+    src: "/img/icon/edit-node-icons/service-connecting.png",
+    action: connectSetup,
+    tooltip: "Setup Connection",
+  },
+  {
+    name: "delete",
+    src: "/img/icon/edit-node-icons/service-delete.png",
+    tooltip: "Remove Setup",
+    action: deleteSetup,
+  },
+  {
+    name: "info",
+    src: "/img/icon/edit-node-icons/service-info.png",
+    tooltip: "Setup Informations",
+    action: infoModal,
+  },
+  {
+    name: "open",
+    src: "/img/icon/edit-node-icons/link.png",
+    tooltip: "Configs Page",
+    action: openConfigs,
+  },
+];
+</script>

launcher/src/components/UI/edit-page/components/edit/setups/SingleSetup.vue

@@ -0,0 +1,91 @@
+<template>
+  <div
+    class="w-[130px] h-[120px] col-span-1 row-span-1 items-center border rounded-md mx-auto relative grid grid-cols-2 grid-rows-12"
+    :class="getDynamicClasses(props.setup)"
+    @mouseenter="props.setup.isActive = true"
+    @mouseleave="props.setup.isActive = false"
+  >
+    <div
+      class="w-full h-full col-start-1 col-span-full row-start-1 row-span-2 text-[10px] text-center font-semibold capitalize overflow-hidden whitespace-nowrap truncate p-1 rounded-t-[0.28rem]"
+      :class="[textColor, bgColor]"
+    >
+      <span>{{ props.setup.setupName }}</span>
+    </div>
+
+    <SetupLayout :setup="props.setup" />
+    <Transition name="slide-fade">
+      <SetupMenu
+        v-if="props.setup.isActive && !props.setup.isRemoveProcessing"
+        :setup="props.setup"
+        @delete-setup="deleteSetup"
+        @connect-setup="connectSetup"
+        @info-modal="infoModal"
+        @open-configs="openConfigs"
+      />
+    </Transition>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useSetups } from "../../../../../../store/setups";
+import SetupLayout from "./SetupLayout.vue";
+import SetupMenu from "./SetupMenu.vue";
+
+// props & emits
+const props = defineProps({
+  setup: Object,
+});
+
+const emit = defineEmits(["deleteSetup", "connectSetup", "infoModal", "openConfigs"]);
+
+//Store
+
+const setupStore = useSetups();
+// refs
+
+//Computed
+const getDynamicClasses = (item) => {
+  if (item.hasOwnProperty("isRemoveProcessing") && item.isRemoveProcessing) {
+    return "border bg-red-500 border-white";
+  } else {
+    return "border-gray-500";
+  }
+};
+const textColor = computed(() => setupStore.getColor(props.setup.color, "text"));
+const bgColor = computed(() => setupStore.getColor(props.setup.color, "background"));
+
+//Lifecycle Hooks
+
+//Methods
+const deleteSetup = (item) => {
+  emit("deleteSetup", item);
+};
+
+const connectSetup = (item) => {
+  emit("connectSetup", item);
+};
+
+const infoModal = (item) => {
+  emit("infoModal", item);
+};
+
+const openConfigs = (item) => {
+  emit("openConfigs", item);
+};
+</script>
+<style scoped>
+.slide-fade-enter-active {
+  transition: all 0.3s ease-out;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translateX(50px);
+  opacity: 0;
+}
+</style>

launcher/src/components/UI/edit-page/components/loader-anime/LoaderAnime.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="w-full h-full fixed inset-0 flex justify-center items-center rounded-lg z-20"
+  >
+    <div class="w-full h-full opacity-70 fixed inset-0 bg-black z-30 rounded-lg"></div>
+    <div class="w-2/3 flex justify-center items-center p-8 z-50">
+      <img class="opacity-80" :src="props.anime" alt="Modify Gif" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  anime: {
+    type: String,
+    required: true,
+  },
+});
+</script>

launcher/src/components/UI/edit-page/components/modals/AddConnection.vue

@@ -1,6 +1,9 @@
 import { onMounted, computed } from 'vue';
 <template>
-  <div v-if="!manageStore.newConfiguration.length > 0" class="mt-4 flex justify-center items-center">
+  <div
+    v-if="!manageStore.newConfiguration.length > 0"
+    class="mt-4 flex justify-center items-center"
+  >
     <p class="text-md text-gray-400 font-semibold">
       {{ $t("editModals.noAvailService") }}
     </p>
@@ -11,17 +14,23 @@ import { onMounted, computed } from 'vue';
       class="w-1/3 h-[280px] flex flex-col justify-start items-center"
     >
       <div class="w-full h-5 flex justify-center items-center mt-2">
-        <span class="text-lg font-semibold text-gray-500">{{ $t("editModals.consensusClients") }}</span>
+        <span class="text-lg font-semibold text-gray-500">{{
+          $t("editModals.consensusClients")
+        }}</span>
       </div>
       <div
         class="w-full h-[250px] overflow-y-auto overflow-x-hidden flex flex-col justify-start items-center mx-auto rounded-lg space-y-2 mt-1"
       >
         <div
-          v-for="option in list.filter((e) => e.category === 'consensus')"
+          v-for="option in list.filter(
+            (e) =>
+              e.category === 'consensus' && e.setupId === setupStore.selectedSetup.setupId
+          )"
           :key="option.service"
           class="group mx-auto rounded-md cursor-pointer transition duration-200 shadow-xl shadow-[#141516] p-2"
           :class="{
-            'bg-teal-600 hover:bg-teal-600 text-gray-200 border-2 border-teal-700': option.isConnected,
+            'bg-teal-600 hover:bg-teal-600 text-gray-200 border-2 border-teal-700':
+              option.isConnected,
             'bg-[#282a2c] text-teal-600 border-2 border-gray-600 hover:border-teal-600': !option.isConnected,
             ' w-[190px] h-[55px]': props.client.service === 'SSVNetworkService',
             'w-[200px] h-[65px] text-md': props.client.service !== 'SSVNetworkService',
@@ -52,17 +61,23 @@ import { onMounted, computed } from 'vue';
       class="w-1/3 h-[280px] flex flex-col justify-start items-center"
     >
       <div class="w-full h-5 flex justify-center items-center mt-2">
-        <span class="text-lg font-semibold text-gray-500">{{ $t("editModals.executionClients") }}</span>
+        <span class="text-lg font-semibold text-gray-500">{{
+          $t("editModals.executionClients")
+        }}</span>
       </div>
       <div
         class="w-full h-[250px] overflow-x-hidden overflow-y-auto flex flex-col justify-start items-center mx-auto rounded-lg space-y-2 mt-1"
       >
         <div
-          v-for="option in list.filter((e) => e.category === 'execution')"
+          v-for="option in list.filter(
+            (e) =>
+              e.category === 'execution' && e.setupId === setupStore.selectedSetup.setupId
+          )"
           :key="option.service"
           class="group mx-auto rounded-md cursor-pointer transition duration-200 shadow-xl shadow-[#141516] p-2"
           :class="{
-            'bg-teal-600 hover:bg-teal-600 text-gray-200 border-2 border-teal-700': option.isConnected,
+            'bg-teal-600 hover:bg-teal-600 text-gray-200 border-2 border-teal-700':
+              option.isConnected,
             'bg-[#282a2c] text-teal-600 border-2 border-gray-600 hover:border-teal-600': !option.isConnected,
             ' w-[190px] h-[55px]': props.client.service === 'SSVNetworkService',
             'w-[200px] h-[65px] text-md': props.client.service !== 'SSVNetworkService',
@@ -93,17 +108,23 @@ import { onMounted, computed } from 'vue';
       class="w-1/3 h-[280px] flex flex-col justify-start items-center"
     >
       <div class="w-full h-5 flex justify-center items-center mt-2">
-        <span class="text-lg font-semibold text-gray-500">{{ $t("editModals.validatorClients") }}</span>
+        <span class="text-lg font-semibold text-gray-500">{{
+          $t("editModals.validatorClients")
+        }}</span>
       </div>
       <div
         class="w-full h-[250px] flex flex-col justify-start items-center mx-auto rounded-lg space-y-2 mt-1 overflow-x-hidden overflow-y-auto"
       >
         <div
-          v-for="option in list.filter((e) => e.category === 'validator')"
+          v-for="option in list.filter(
+            (e) =>
+              e.category === 'validator' && e.setupId === setupStore.selectedSetup.setupId
+          )"
           :key="option.service"
           class="group mx-auto rounded-md cursor-pointer transition duration-200 shadow-xl shadow-[#141516] p-2"
           :class="{
-            'bg-teal-600 hover:bg-teal-600 text-gray-200 border-2 border-teal-700': option.isConnected,
+            'bg-teal-600 hover:bg-teal-600 text-gray-200 border-2 border-teal-700':
+              option.isConnected,
             'bg-[#282a2c] text-teal-600 border-2 border-gray-600 hover:border-teal-600': !option.isConnected,
             ' w-[190px] h-[55px]': props.client.service === 'SSVNetworkService',
             'w-[200px] h-[65px] text-md': props.client.service !== 'SSVNetworkService',
@@ -144,7 +165,8 @@ import { onMounted, computed } from 'vue';
           :key="option.service"
           class="group mx-auto rounded-md cursor-pointer transition duration-200 shadow-xl shadow-[#141516] p-2"
           :class="{
-            'bg-teal-600 hover:bg-teal-600 text-gray-200 border-2 border-teal-700': option.isConnected,
+            'bg-teal-600 hover:bg-teal-600 text-gray-200 border-2 border-teal-700':
+              option.isConnected,
             'bg-[#282a2c] text-teal-600 border-2 border-gray-600 hover:border-teal-600': !option.isConnected,
             ' w-[190px] h-[55px]': props.client.service === 'SSVNetworkService',
             'w-[200px] h-[65px] text-md': props.client.service !== 'SSVNetworkService',
@@ -175,6 +197,7 @@ import { onMounted, computed } from 'vue';
 <script setup>
 import { useNodeManage } from "@/store/nodeManage";
 import { onMounted, ref } from "vue";
+import { useSetups } from "../../../../../store/setups";
 
 const emit = defineEmits(["select-service"]);
 
@@ -194,6 +217,7 @@ const props = defineProps({
 
 //Stores
 const manageStore = useNodeManage();
+const setupStore = useSetups();
 
 //Lifecycle Hooks
 onMounted(() => {
@@ -211,11 +235,15 @@ const toggleConnection = (option) => {
   } else {
     option.isConnected = false;
   }
-  props.properties.executionClients = list.value.filter((e) => e.category === "execution" && e.isConnected);
+  props.properties.executionClients = list.value.filter(
+    (e) => e.category === "execution" && e.isConnected
+  );
   props.properties.consensusClients = list.value.filter(
     (e) => (e.category === "consensus" || e.service === "CharonService") && e.isConnected
   );
-  props.properties.otherServices = list.value.filter((e) => e.category === "service" && e.isConnected);
+  props.properties.otherServices = list.value.filter(
+    (e) => e.category === "service" && e.isConnected
+  );
 };
 
 const getConnectionOptions = () => {
@@ -232,15 +260,19 @@ const getConnectionOptions = () => {
       return manageStore.newConfiguration.filter((e) => e.category === "execution");
     case "validator":
       if (props.client.service === "SSVNetworkService") {
-        return manageStore.newConfiguration.filter((e) => e.category === "consensus" || e.category === "execution");
+        return manageStore.newConfiguration.filter(
+          (e) => e.category === "consensus" || e.category === "execution"
+        );
       }
       if (props.client.service === "Web3SignerService") {
         return [];
       }
       if (props.client.service === "CharonService") {
         return manageStore.newConfiguration.filter((e) => e.category === "consensus");
       }
-      return manageStore.newConfiguration.filter((e) => e.category === "consensus" || e.service === "CharonService");
+      return manageStore.newConfiguration.filter(
+        (e) => e.category === "consensus" || e.service === "CharonService"
+      );
     case "service":
       if (props.client.service === "FlashbotsMevBoostService") {
         return manageStore.newConfiguration.filter((e) => e.category === "consensus");
@@ -251,7 +283,9 @@ const getConnectionOptions = () => {
         );
       }
       if (props.client.service === "ValidatorEjectorService") {
-        return manageStore.newConfiguration.filter((e) => /consensus|execution/.test(e.category));
+        return manageStore.newConfiguration.filter((e) =>
+          /consensus|execution/.test(e.category)
+        );
       }
       break;
     default:
@@ -261,7 +295,9 @@ const getConnectionOptions = () => {
 
 const shortID = (client) => {
   if (client?.config?.serviceID) {
-    return client.config.serviceID.slice(0, 8) + "..." + client.config.serviceID.slice(-8);
+    return (
+      client.config.serviceID.slice(0, 8) + "..." + client.config.serviceID.slice(-8)
+    );
   }
   return client.id;
 };