ADD: new icons and optional legacy

launcher/public/output.css

@@ -2118,10 +2118,6 @@ video {
   max-height: 100%;
 }
 
-.max-h-\[180px\]{
-  max-height: 180px;
-}
-
 .min-h-11{
   min-height: 2.75rem;
 }
@@ -2170,10 +2166,6 @@ video {
   min-height: 55px;
 }
 
-.min-h-\[35px\]{
-  min-height: 35px;
-}
-
 .w-1\/2{
   width: 50%;
 }
@@ -2558,12 +2550,6 @@ video {
           flex: none;
 }
 
-.flex-1{
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 0%;
-          flex: 1 1 0%;
-}
-
 .flex-shrink{
   -ms-flex-negative: 1;
       flex-shrink: 1;
@@ -2982,6 +2968,10 @@ video {
   gap: 0.5rem;
 }
 
+.gap-3{
+  gap: 0.75rem;
+}
+
 .gap-4{
   gap: 1rem;
 }
@@ -2990,10 +2980,6 @@ video {
   gap: 1.25rem;
 }
 
-.gap-3{
-  gap: 0.75rem;
-}
-
 .gap-x-1{
   -webkit-column-gap: 0.25rem;
      -moz-column-gap: 0.25rem;
@@ -4384,6 +4370,11 @@ video {
   background-color: rgb(252 165 165 / var(--tw-bg-opacity, 1));
 }
 
+.bg-red-400{
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
+}
+
 .bg-red-500{
   --tw-bg-opacity: 1;
   background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
@@ -4809,10 +4800,6 @@ video {
   padding-top: 2px;
 }
 
-.pt-3{
-  padding-top: 0.75rem;
-}
-
 .text-left{
   text-align: left;
 }

launcher/src/components/UI/one-click/components/plugin/ConfigBody.vue

@@ -1,40 +1,22 @@
 <template>
-  <div
-    class="w-full h-full col-start-1 col-span-full row-start-3 row-end-11 grid grid-cols-12 grid-rows-7 p-2 mx-auto"
-  >
+  <div class="w-full h-full col-start-1 col-span-full row-start-3 row-end-11 grid grid-cols-12 grid-rows-7 p-2 mx-auto">
     <div
       class="w-full h-full col-start-3 col-end-11 row-start-1 row-span-full bg-[#1E2429] rounded-md grid grid-cols-12 grid-rows-7 p-4 gap-1"
     >
-      <div
-        class="col-start-1 col-span-full row-start-1 row-span-1 grid grid-cols-2 gap-1"
-      >
+      <div class="col-start-1 col-span-full row-start-1 row-span-1 grid grid-cols-2 gap-1">
         <div class="w-full h-10 col-start-1 col-span-1 flex justify-center items-center">
-          <div
-            class="w-full h-8 border border-gray-600 rounded-md p-1 flex justify-center items-center"
-          >
-            <span class="text-center text-gray-400 text-md font-normal">{{
-              $t("oneClick.installedService")
-            }}</span>
+          <div class="w-full h-8 border border-gray-600 rounded-md p-1 flex justify-center items-center">
+            <span class="text-center text-gray-400 text-md font-normal">{{ $t("oneClick.installedService") }}</span>
           </div>
         </div>
-        <div
-          class="w-full h-10 col-start-2 col-span-1 flex justify-center items-center relative"
-        >
-          <div
-            class="w-full h-8 border border-gray-600 rounded-md p-1 flex flex-col justify-between items-center"
-          >
-            <span class="text-center text-gray-400 text-md font-normal">{{
-              $t("oneClick.addOption")
-            }}</span>
+        <div class="w-full h-10 col-start-2 col-span-1 flex justify-center items-center relative">
+          <div class="w-full h-8 border border-gray-600 rounded-md p-1 flex flex-col justify-between items-center">
+            <span class="text-center text-gray-400 text-md font-normal">{{ $t("oneClick.addOption") }}</span>
           </div>
         </div>
       </div>
 
-      <PluginRows
-        :filtered-plugin="filteredPluginsOnCategory"
-        @change-handler="pluginChangeHandler"
-        @plugin-exchange="pluginExChange"
-      />
+      <PluginRows :filtered-plugin="filteredPluginsOnCategory" @change-handler="pluginChangeHandler" @plugin-exchange="pluginExChange" />
 
       <InstallationPath />
     </div>
@@ -70,14 +52,12 @@ watch(
 //Lifecycle Hooks
 
 onMounted(() => {
-  clickStore.selectedPreset.includedPlugins = clickStore.selectedPreset.includedPlugins.map(
-    (item) => {
-      return {
-        ...item,
-        openReplaceModal: false,
-      };
-    }
-  );
+  clickStore.selectedPreset.includedPlugins = clickStore.selectedPreset.includedPlugins.map((item) => {
+    return {
+      ...item,
+      openReplaceModal: false,
+    };
+  });
 });
 onMounted(() => {
   getInstallPath();
@@ -91,23 +71,12 @@ const filterMonitoringServices = () => {
   if (clickStore.installMonitoring) {
     clickStore.selectedPreset.includedPlugins = clickStore.selectedPreset.includedPlugins.concat(
       serviceStore.allServices.filter((s) =>
-        [
-          "GrafanaService",
-          "PrometheusNodeExporterService",
-          "PrometheusService",
-          "MetricsExporterService",
-        ].includes(s.service)
+        ["GrafanaService", "PrometheusNodeExporterService", "PrometheusService", "MetricsExporterService"].includes(s.service)
       )
     );
   } else {
     clickStore.selectedPreset.includedPlugins = clickStore.selectedPreset.includedPlugins.filter(
-      (s) =>
-        ![
-          "GrafanaService",
-          "PrometheusNodeExporterService",
-          "PrometheusService",
-          "MetricsExporterService",
-        ].includes(s.service)
+      (s) => !["GrafanaService", "PrometheusNodeExporterService", "PrometheusService", "MetricsExporterService"].includes(s.service)
     );
   }
 };
@@ -119,9 +88,7 @@ const selectedPluginsValidation = () => {
 };
 const pluginChangeHandler = (plugin, item, idx) => {
   plugin.openReplaceModal = false;
-  const oldPluginIndex = clickStore.selectedPreset.includedPlugins.findIndex(
-    (e) => e.id === plugin?.id
-  );
+  const oldPluginIndex = clickStore.selectedPreset.includedPlugins.findIndex((e) => e.id === plugin?.id);
 
   if (oldPluginIndex !== -1) {
     clickStore.selectedPreset.includedPlugins.splice(oldPluginIndex, 1);
@@ -130,49 +97,29 @@ const pluginChangeHandler = (plugin, item, idx) => {
   clickStore.selectedPreset.includedPlugins.splice(idx, 0, item);
 
   if (
-    [
-      "staking",
-      "mev boost",
-      "stereum on arm",
-      "archive",
-      "lidocsm",
-      "op and eth full node",
-      "op and eth node archive",
-    ].includes(clickStore.selectedPreset.name)
+    ["staking", "mev boost", "stereum on arm", "archive", "lidocsm", "op and eth full node", "op and eth node archive"].includes(
+      clickStore.selectedPreset.name
+    )
   ) {
     if (item.category === "consensus") {
-      let valIndex = clickStore.selectedPreset.includedPlugins.findIndex(
-        (e) => e.category === "validator"
-      );
+      let valIndex = clickStore.selectedPreset.includedPlugins.findIndex((e) => e.category === "validator");
       clickStore.selectedPreset.includedPlugins[valIndex] = serviceStore.allServices.find(
         (e) => e.service === item.name + "ValidatorService"
       );
     } else if (item.category === "validator") {
-      let conIndex = clickStore.selectedPreset.includedPlugins.findIndex(
-        (e) => e.category === "consensus"
-      );
-      clickStore.selectedPreset.includedPlugins[conIndex] = serviceStore.allServices.find(
-        (e) => e.service === item.name + "BeaconService"
-      );
+      let conIndex = clickStore.selectedPreset.includedPlugins.findIndex((e) => e.category === "consensus");
+      clickStore.selectedPreset.includedPlugins[conIndex] = serviceStore.allServices.find((e) => e.service === item.name + "BeaconService");
     }
   }
   sortPlugins();
 };
 
 const sortPlugins = () => {
   if (clickStore.selectedPreset.includedPlugins) {
-    const ec = clickStore.selectedPreset.includedPlugins.filter(
-      (p) => p.category === "execution"
-    );
-    const cc = clickStore.selectedPreset.includedPlugins.filter(
-      (p) => p.category === "consensus"
-    );
-    const vc = clickStore.selectedPreset.includedPlugins.filter(
-      (p) => p.category === "validator"
-    );
-    const services = clickStore.selectedPreset.includedPlugins.filter(
-      (p) => p.category === "service"
-    );
+    const ec = clickStore.selectedPreset.includedPlugins.filter((p) => p.category === "execution");
+    const cc = clickStore.selectedPreset.includedPlugins.filter((p) => p.category === "consensus");
+    const vc = clickStore.selectedPreset.includedPlugins.filter((p) => p.category === "validator");
+    const services = clickStore.selectedPreset.includedPlugins.filter((p) => p.category === "service");
     clickStore.selectedPreset.includedPlugins = new Array().concat(ec, cc, vc, services);
   }
 };
@@ -194,13 +141,9 @@ const checkPluginCategory = (element) => {
   switch (clickStore.selectedPreset.name) {
     case "lidocsm":
     case "staking":
-      filter = (item) =>
-        item.category === element.category &&
-        !/(SSVNetwork|Web3Signer|Charon)/.test(item.service);
+      filter = (item) => item.category === element.category && !/(SSVNetwork|Web3Signer|Charon)/.test(item.service);
       if (manageStore.currentNetwork.network == "gnosis") {
-        filter = (item) =>
-          item.category === element.category &&
-          /(Lighthouse|Teku|Nethermind|Erigon|Nimbus|Lodestar)/.test(item.service);
+        filter = (item) => item.category === element.category && /(Lighthouse|Teku|Nethermind|Erigon|Nimbus|Lodestar)/.test(item.service);
       }
       break;
     case "ssv.network":
@@ -220,10 +163,7 @@ const checkPluginCategory = (element) => {
     case "lidoobol":
       filter = (item) => {
         if (element.category === "execution" && element.service !== "CharonService") {
-          return (
-            /Teku|Lodestar|Lighthouse|Nimbus/.test(item.service) &&
-            item.category === element.category
-          );
+          return /Teku|Lodestar|Lighthouse|Nimbus/.test(item.service) && item.category === element.category;
         } else if (element.category === "validator") {
           return item.service === "CharonService";
         } else {
@@ -235,36 +175,24 @@ const checkPluginCategory = (element) => {
       //filter = (item) => item.category === element.category
       break;
     case "mev boost":
-      filter = (item) =>
-        item.category === element.category &&
-        !/(SSVNetwork|Reth|Web3Signer|Charon)/.test(item.service);
+      filter = (item) => item.category === element.category && !/(SSVNetwork|Reth|Web3Signer|Charon)/.test(item.service);
       break;
     case "stereum on arm":
-      filter = (item) =>
-        item.category === element.category &&
-        !/(Prysm|Reth|SSVNetwork|Web3Signer|Charon)/.test(item.service);
+      filter = (item) => item.category === element.category && !/(Prysm|Reth|SSVNetwork|Web3Signer|Charon)/.test(item.service);
       if (manageStore.currentNetwork.network == "gnosis") {
-        filter = (item) =>
-          item.category === element.category &&
-          /(Lighthouse|Teku|Nethermind)/.test(item.service);
+        filter = (item) => item.category === element.category && /(Lighthouse|Teku|Nethermind)/.test(item.service);
       }
       break;
     case "archive":
-      filter = (item) =>
-        item.category === element.category &&
-        !/(SSVNetwork|Web3Signer|Charon)/.test(item.service);
+      filter = (item) => item.category === element.category && !/(SSVNetwork|Web3Signer|Charon)/.test(item.service);
       if (manageStore.currentNetwork.network == "gnosis") {
-        filter = (item) =>
-          item.category === element.category &&
-          /(Lighthouse|Teku|Nethermind|Erigon|Nimbus|Lodestar)/.test(item.service);
+        filter = (item) => item.category === element.category && /(Lighthouse|Teku|Nethermind|Erigon|Nimbus|Lodestar)/.test(item.service);
       }
       break;
     case "op full node":
     case "op node archive":
       filter = (item) =>
-        item.category === element.category &&
-        item.service === element.service &&
-        /OpGethService|OpNodeService/.test(item.service);
+        item.category === element.category && item.service === element.service && /OpGethService|OpNodeService/.test(item.service);
       break;
 
     case "op and eth full node":
@@ -276,8 +204,7 @@ const checkPluginCategory = (element) => {
         return (
           item.category === element.category &&
           !/(SSVNetwork|Web3Signer|Charon|L2Geth|OpGeth|OpNode)/.test(item.service) &&
-          (manageStore.currentNetwork.network !== "gnosis" ||
-            /(Lighthouse|Teku|Nethermind|Erigon|Nimbus|Lodestar)/.test(item.service))
+          (manageStore.currentNetwork.network !== "gnosis" || /(Lighthouse|Teku|Nethermind|Erigon|Nimbus|Lodestar)/.test(item.service))
         );
       };
       break;
@@ -291,8 +218,7 @@ const checkPluginCategory = (element) => {
         return (
           item.category === element.category &&
           !/(SSVNetwork|Web3Signer|Charon|L2Geth|OpGeth|OpNode)/.test(item.service) &&
-          (manageStore.currentNetwork.network !== "gnosis" ||
-            /(Lighthouse|Teku|Nethermind|Erigon|Nimbus|Lodestar)/.test(item.service))
+          (manageStore.currentNetwork.network !== "gnosis" || /(Lighthouse|Teku|Nethermind|Erigon|Nimbus|Lodestar)/.test(item.service))
         );
       };
       break;
@@ -306,9 +232,7 @@ const checkPluginCategory = (element) => {
 const getInstallPath = async () => {
   let largestVolumePath = await ControlService.getLargestVolumePath();
   if (largestVolumePath === "/") largestVolumePath = largestVolumePath + "opt";
-  const stereumInstallationPath = [largestVolumePath, "/stereum"]
-    .join("/")
-    .replace(/\/{2,}/, "/");
+  const stereumInstallationPath = [largestVolumePath, "/stereum"].join("/").replace(/\/{2,}/, "/");
   clickStore.installationPath = stereumInstallationPath;
 };
 </script>