ADD: vc only preset

launcher/public/output.css

@@ -1,7 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap");
 
 /*
-! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.6 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -807,10 +807,6 @@ video {
   top: -90px;
 }
 
-.bottom-0{
-  bottom: 0px;
-}
-
 .bottom-0\.5{
   bottom: 0.125rem;
 }
@@ -847,10 +843,6 @@ video {
   inset-inline-end: 0.25rem;
 }
 
-.end-2{
-  inset-inline-end: 0.5rem;
-}
-
 .left-0{
   left: 0px;
 }
@@ -2206,6 +2198,10 @@ video {
   width: 15rem;
 }
 
+.w-64{
+  width: 16rem;
+}
+
 .w-7{
   width: 1.75rem;
 }
@@ -2410,11 +2406,6 @@ video {
           flex: none;
 }
 
-.flex-shrink{
-  -ms-flex-negative: 1;
-      flex-shrink: 1;
-}
-
 .flex-shrink-0{
   -ms-flex-negative: 0;
       flex-shrink: 0;
@@ -2736,11 +2727,6 @@ video {
           flex-direction: column;
 }
 
-.flex-wrap{
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-}
-
 .place-content-center{
   place-content: center;
 }
@@ -2949,6 +2935,11 @@ video {
   border-color: rgb(156 163 175 / var(--tw-divide-opacity));
 }
 
+.divide-gray-500 > :not([hidden]) ~ :not([hidden]){
+  --tw-divide-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-divide-opacity));
+}
+
 .divide-gray-600 > :not([hidden]) ~ :not([hidden]){
   --tw-divide-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-divide-opacity));
@@ -4510,11 +4501,6 @@ video {
   line-height: 1.25rem;
 }
 
-.text-sm\/none{
-  font-size: 0.875rem;
-  line-height: 1;
-}
-
 .text-xl{
   font-size: 1.25rem;
   line-height: 1.75rem;
@@ -5386,11 +5372,6 @@ html body {
   left: 2px;
 }
 
-.after\:top-0::after{
-  content: var(--tw-content);
-  top: 0px;
-}
-
 .after\:top-0\.5::after{
   content: var(--tw-content);
   top: 0.125rem;

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

@@ -17,6 +17,7 @@
           @delete-setup="deleteSetup"
           @confirm-consensus="confirmConsensusConnection"
           @info-modal="openInfoModal"
+          @external-modify="openExternalModifyingModal"
         />
       </div>
       <div class="col-start-17 col-end-21 ml-1 grid grid-cols-2 grid-rows-9">
@@ -82,6 +83,15 @@
         @confirm-modify="confirmModifyingService"
       />
       <!-- End Modify Services Modal -->
+      <!-- Start External Modify for External Service -->
+      <ExternalModifying
+        v-if="isExternalModifyOpen"
+        :client="clientToModify"
+        @close-window="hideExternalModify"
+        @confirm-install="confirmExternalModifying"
+      />
+      <!-- End External Modify for External Service -->
+
       <!-- Start Add configs for Custom Service -->
 
       <AddCustom
@@ -149,6 +159,7 @@ import AddModal from "./components/modals/AddModal.vue";
 import InfoModal from "./components/modals/InfoModal.vue";
 import ModifyModal from "./components/modals/ModifyModal.vue";
 import NetworkModal from "./components/modals/NetworkModal.vue";
+import ExternalModifying from "./components/modals/ExternalModifying.vue";
 import NukeModal from "./components/modals/NukeModal.vue";
 import SwitchModal from "./components/modals/SwitchModal.vue";
 import AddCustom from "./components/modals/custom-service/AddCustom.vue";
@@ -184,6 +195,7 @@ const isModifyModalOpen = ref(false);
 const isAddModalOpen = ref(false);
 const clientToConnect = ref(null);
 const isNukeModalOpen = ref(false);
+const isExternalModifyOpen = ref(false);
 const nukeModalComponent = ref();
 const selectedSetupNetwork = ref("");
 const changeAnime = ref("/animation/confirm-changes/modify.gif");
@@ -352,6 +364,12 @@ const switchClientConfirm = (properties) => {
 };
 // Clients Modifying methods
 
+const confirmExternalModifying = (client, properties) => {
+  isExternalModifyOpen.value = false;
+  console.log("External Confirm", client);
+  console.log("External Confirm", properties);
+};
+
 const confirmModifyingService = (item) => {
   isModifyModalOpen.value = false;
   if (item.client.service === "FlashbotsMevBoostService") {
@@ -918,6 +936,20 @@ const confirmImportSingleSetup = async (data) => {
   setupStore.isImportAnimeActive = true;
 };
 
+const openExternalModifyingModal = (item) => {
+  console.log("item", item);
+
+  clientToModify.value = item;
+  console.log("clientToModify", clientToModify.value);
+
+  isExternalModifyOpen.value = true;
+};
+
+const hideExternalModify = () => {
+  manageStore.isLineHidden = false;
+  isExternalModifyOpen.value = false;
+};
+
 const closeNetworkModal = () => {
   manageStore.displayNetworkList = false;
   manageStore.isLineHidden = false;

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

@@ -38,6 +38,7 @@
         @switch-client="switchClient"
         @confirm-consensus="confirmConsensus"
         @info-modal="infoModal"
+        @external-modify="externalModify"
         @mouse-over="lineDraw"
         @mouse-leave="removeLines"
       />
@@ -49,6 +50,7 @@
         @switch-client="switchClient"
         @modify-service="modifyService"
         @info-modal="infoModal"
+        @external-modify="externalModify"
         @mouse-over="lineDraw"
         @mouse-leave="removeLines"
       />
@@ -82,6 +84,7 @@ const emit = defineEmits([
   "deleteService",
   "confirmConsensus",
   "infoModal",
+  "externalModify",
   "modifyService",
   "removeLines",
   "lineDraw",
@@ -151,4 +154,8 @@ const infoModal = (service) => {
 const modifyService = (service) => {
   emit("modifyService", service);
 };
+
+const externalModify = (service) => {
+  emit("externalModify", service);
+};
 </script>

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

@@ -10,6 +10,7 @@
       @confirm-consensus="confirmConsensus"
       @info-modal="infoModal"
       @modify-service="modifyService"
+      @external-modify="externalModify"
       @remove-lines="removeConnectionLines"
     />
     <SetupBody v-else @delete-setup="deleteSetup" @connect-setup="connectSetup" @setup-infos="setupInfos" @open-configs="openConfigs" />
@@ -37,7 +38,7 @@ const emit = defineEmits([
   "confirmConsensus",
   "infoModal",
   "modifyService",
-
+  "externalModify",
   "openConfigs",
   "deleteSetup",
 ]);
@@ -115,6 +116,11 @@ const infoModal = (item) => {
   emit("infoModal", item);
 };
 
+const externalModify = (item) => {
+  manageStore.isLineHidden = true;
+  emit("externalModify", item);
+};
+
 const selectRename = async (setup) => {
   setupStore.setupToRename = setup.setupName;
   setupStore.isRenameSetupActive = true;

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

@@ -23,6 +23,7 @@
           @modify-service="modifyService"
           @delete-service="deleteService"
           @info-modal="infoModal"
+          @external-modify="externalModify"
         />
       </TransitionGroup>
     </div>
@@ -38,7 +39,7 @@ import { computed } from "vue";
 import { useSetups } from "../../../../../../store/setups";
 
 //Props & Emits
-const emit = defineEmits(["deleteService", "switchClient", "modifyService", "infoModal", "mouseOver", "mouseLeave"]);
+const emit = defineEmits(["deleteService", "switchClient", "modifyService", "externalModify", "infoModal", "mouseOver", "mouseLeave"]);
 
 //Refs
 
@@ -114,6 +115,10 @@ const modifyService = (item) => {
 const infoModal = (item) => {
   emit("infoModal", item);
 };
+
+const externalModify = (item) => {
+  emit("externalModify", item);
+};
 </script>
 <style scoped>
 .slide-fade-enter-active {

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

@@ -23,6 +23,7 @@
           @connect-client="connectClient"
           @delete-service="deleteService"
           @info-modal="infoModal"
+          @external-modify="externalModify"
         />
       </TransitionGroup>
     </div>
@@ -108,6 +109,10 @@ const switchClient = (item) => {
 const infoModal = (item) => {
   emit("infoModal", item);
 };
+
+const externalModify = (item) => {
+  emit("externalModify", item);
+};
 </script>
 <style scoped>
 .slide-fade-enter-active {

launcher/src/components/UI/edit-page/components/edit/clients/GeneralMenu.vue

@@ -19,6 +19,15 @@
         @mouseenter="footerStore.cursorLocation = `${switchClientTooltip}`"
         @mouseleave="footerStore.cursorLocation = ''"
       />
+      <img
+        v-if="item.service === 'ExternalExecutionService' || item.service === 'ExternalConsensusService'"
+        class="w-7 border border-gray-700 bg-gray-900 rounded-md hover:bg-gray-500 p-1 cursor-pointer active:scale-90 transition duration-200"
+        src="/img/icon/edit-node-icons/service-connecting.png"
+        alt="Trash Icon"
+        @click="externalModify"
+        @mouseenter="footerStore.cursorLocation = `${switchClientTooltip}`"
+        @mouseleave="footerStore.cursorLocation = ''"
+      />
       <img
         class="w-7 border border-gray-700 bg-gray-900 rounded-md hover:bg-gray-500 p-1 cursor-pointer active:scale-90 transition duration-200"
         src="/img/icon/edit-node-icons/service-delete.png"
@@ -60,7 +69,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["deleteService", "switchClient", "modifyService", "infoModal"]);
+const emit = defineEmits(["deleteService", "switchClient", "modifyService", "infoModal", "externalModify"]);
 
 const deleteService = () => {
   emit("deleteService", props.item);
@@ -81,4 +90,9 @@ const infoModal = () => {
   emit("infoModal", props.item);
   footerStore.cursorLocation = "";
 };
+
+const externalModify = () => {
+  emit("externalModify", props.item);
+  footerStore.cursorLocation = "";
+};
 </script>

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

@@ -96,11 +96,9 @@ const getSubTitles = computed(() => {
 
 const externalServiceConfirmBtn = computed(() => {
   if (props.client.service === "ExternalExecutionService") {
-    return props.client.config.source === "" || props.client.config.jwtToken === "";
-  } else if (props.client.service === "ExternalConsensusService" && manageStore.externalConsensusSelectedService !== "prysm") {
+    return props.client.config.source === "" && props.client.config.jwtToken === "";
+  } else if (props.client.service === "ExternalConsensusService") {
     return props.client.config.source === "";
-  } else if (props.client.service === "ExternalConsensusService" && manageStore.externalConsensusSelectedService === "prysm") {
-    return props.client.config.source === "" || props.client.config.gateway === "";
   }
   return false;
 });