stereum-dev · MaxTheGeeek · Apr 10, 2025 · Apr 10, 2025 · Apr 10, 2025 · Apr 10, 2025
diff --git a/.env b/.env
@@ -0,0 +1 @@
+VITE_DEV_SERVER_URL=http://localhost:5173
diff --git a/launcher/package.json b/launcher/package.json
@@ -12,9 +12,11 @@
     "serve": "vue-cli-service serve --port 8081",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
+    "dev": "vite",
+    "build:vite": "vite build",
     "build-themes": "node-sass src/styles/themes -o public/themes",
     "electron:build": "vue-cli-service electron:build",
-    "electron:serve": "vue-cli-service electron:serve",
+    "electron:serve": "wait-on http://localhost:5173 && electron src/background.js",
     "postinstall": "electron-builder install-app-deps",
     "postuninstall": "electron-builder install-app-deps",
     "test:unit": "jest '(\\.test|\\.spec)\\.js' --coverage",
@@ -23,7 +25,7 @@
     "test:coverage": "jest --coverage",
     "watch:css": "npx tailwindcss -i ./src/main.css -o ./public/output.css --watch",
     "lint:fix": "eslint src --fix",
-    "stereum": "concurrently \"npm:electron:serve\" \"npm:watch:css\"",
+    "stereum": "concurrently \"vite\" \"npm:electron:serve\"",
     "backend:watch": "nodemon --watch 'src/backend' --exec 'npm run electron:serve'",
     "format": "prettier .  --write",
     "format:check": "prettier .  --check"
@@ -70,6 +72,7 @@
     "@babel/preset-env": "^7.26.9",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/typography": "^0.5.16",
+    "@vitejs/plugin-vue": "^5.2.3",
     "@vue/cli-service": "^5.0.8",
     "@vue/compiler-sfc": "^3.5.13",
     "@vue/test-utils": "^2.4.6",
@@ -93,8 +96,10 @@
     "prettier": "^3.5.3",
     "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "^3.4.17",
+    "vite": "^6.2.5",
     "vue-cli-plugin-electron-builder": "^3.0.0-alpha.4",
     "vue-loader": "^17.4.2",
+    "wait-on": "^8.0.3",
     "web3": "^4.16.0"
   },
   "license": "https://wrapbootstrap.com/help/licenses",

diff --git a/launcher/public/index.html b/launcher/public/index.html
@@ -1,20 +1,17 @@
 <!doctype html>
-<html lang="gr">
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <title><%= htmlWebpackPlugin.options.title %></title>
-    <link rel="stylesheet" href="output.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Stereum Launcher</title>
+    <link rel="stylesheet" href="/output.css" />
   </head>
   <body>
     <noscript>
-      <strong
-        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to
-        continue.</strong
-      >
+      <strong> We're sorry but Stereum Launcher doesn't work properly without JavaScript enabled. Please enable it to continue. </strong>
     </noscript>
     <div id="app"></div>
-    <!-- built files will be auto injected -->
+    <script type="module" src="./main.js"></script>
   </body>
 </html>
diff --git a/launcher/src/background.js b/launcher/src/background.js
@@ -1,3 +1,4 @@
+#!/usr/bin/env node
 "use strict";
 
 import { app, protocol, BrowserWindow, shell, dialog, ipcMain, Menu } from "electron";
@@ -909,11 +910,12 @@ async function createWindow(type = "main") {
   win.setMenuBarVisibility(false);
 
   // Load correct URL based on environment
-  if (process.env.WEBPACK_DEV_SERVER_URL) {
-    const url = type === "update" ? `${process.env.WEBPACK_DEV_SERVER_URL}#/update` : process.env.WEBPACK_DEV_SERVER_URL;
+  const devServerUrl = process.env.VITE_DEV_SERVER_URL || process.env.WEBPACK_DEV_SERVER_URL;
 
-    await win.loadURL(url);
+  if (devServerUrl) {
+    const url = type === "update" ? `${devServerUrl}#/update` : devServerUrl;
 
+    await win.loadURL(url);
     if (!process.env.IS_TEST) win.webContents.openDevTools();
   } else {
     createProtocol("app");

diff --git a/launcher/src/components/UI/base-header/components/modals/LogoutModal.vue b/launcher/src/components/UI/base-header/components/modals/LogoutModal.vue
@@ -6,7 +6,7 @@
         <span>{{ $t("logOutModal.logOutTitle") }}</span>
       </div>
       <div class="messageContent">
-        <img src="/img/icon/edit-node-icons/stop-caution-icon.png" alt="" />
+        <img src="/img/icon/edit-node-icons/stop-caution-icon.png" alt="Stop" />
         <span class="question">{{ $t("logOutModal.logOutQuestion") }}</span>
       </div>
       <div class="confrimBtn">

diff --git a/launcher/src/components/UI/edit-page/EditScreen.vue b/launcher/src/components/UI/edit-page/EditScreen.vue
@@ -152,7 +152,7 @@ import DrawerBox from "./components/drawer/DrawerBox.vue";
 import DrawerMenu from "./components/drawer/DrawerMenu.vue";
 import ServicesDrawer from "./components/drawer/ServicesDrawer.vue";
 import SetupsDrawer from "./components/drawer/SetupsDrawer.vue";
-import EditBody from "./components/edit/EditBody";
+import EditBody from "./components/edit/EditBody.vue";
 import LoaderAnime from "./components/loader-anime/LoaderAnime.vue";
 import AddModal from "./components/modals/AddModal.vue";
 import InfoModal from "./components/modals/InfoModal.vue";

diff --git a/launcher/src/components/UI/edit-page/components/modals/AddModal.vue b/launcher/src/components/UI/edit-page/components/modals/AddModal.vue
@@ -18,8 +18,8 @@
 </template>
 <script setup>
 import CustomModal from "./CustomModal.vue";
-import AddPanel from "./AddPanel";
-import AddConnection from "./AddConnection";
+import AddPanel from "./AddPanel.vue";
+import AddConnection from "./AddConnection.vue";
 import MevboostRelays from "./MevboostRelays.vue";
 import { ref, onMounted, computed } from "vue";
 import { useNodeManage } from "@/store/nodeManage";

diff --git a/launcher/src/components/UI/edit-page/components/modals/AddPanel.vue b/launcher/src/components/UI/edit-page/components/modals/AddPanel.vue
@@ -103,7 +103,7 @@ import { onMounted, watch, onUnmounted, ref } from 'vue';
 
 <script setup>
 import { onMounted, ref, watchEffect } from "vue";
-import SyncCarousel from "../edit/SyncCarousel";
+import SyncCarousel from "../edit/SyncCarousel.vue";
 import ControlService from "@/store/ControlService";
 import { useNodeManage } from "@/store/nodeManage";
 

diff --git a/launcher/src/components/UI/edit-page/components/modals/SwitchContent.vue b/launcher/src/components/UI/edit-page/components/modals/SwitchContent.vue
@@ -55,7 +55,7 @@
 import { ref, computed } from "vue";
 import { useServices } from "@/store/services";
 import { useSetups } from "@/store/setups";
-import SyncCarousel from "../edit/SyncCarousel";
+import SyncCarousel from "../edit/SyncCarousel.vue";
 
 const props = defineProps({
   client: {

diff --git a/launcher/src/components/UI/edit-page/components/modals/SwitchModal.vue b/launcher/src/components/UI/edit-page/components/modals/SwitchModal.vue
@@ -17,7 +17,7 @@
 <script setup>
 import { ref } from "vue";
 import CustomModal from "./CustomModal.vue";
-import SwitchContent from "./SwitchContent";
+import SwitchContent from "./SwitchContent.vue";
 import { useClickInstall } from "@/store/clickInstallation";
 
 const installStore = useClickInstall();

diff --git a/launcher/src/components/UI/edit-page/sections/ChangesSection.vue b/launcher/src/components/UI/edit-page/sections/ChangesSection.vue
@@ -31,7 +31,7 @@
 
 <script setup>
 import { useNodeManage } from "@/store/nodeManage";
-import ChangesBox from "../components/changes/ChangesBox";
+import ChangesBox from "../components/changes/ChangesBox.vue";
 import { useFooter } from "@/store/theFooter";
 import i18n from "@/includes/i18n";
 

diff --git a/launcher/src/components/UI/node-page/NodeScreen.vue b/launcher/src/components/UI/node-page/NodeScreen.vue
@@ -63,7 +63,7 @@ import ExpertWindow from "./sections/ExpertWindow.vue";
 import LogsSection from "./sections/LogsSection.vue";
 import NodeSection from "./sections/NodeSection.vue";
 import ServiceSection from "./sections/ServiceSection.vue";
-import SidebarSection from "./sections/SidebarSection";
+import SidebarSection from "./sections/SidebarSection.vue";
 
 //*****************  Store & Refs *****************
 const nodeStore = useNodeStore();

diff --git a/launcher/src/components/UI/node-page/components/logs/LogBody.vue b/launcher/src/components/UI/node-page/components/logs/LogBody.vue
@@ -29,7 +29,7 @@
   </div>
 </template>
 <script setup>
-import LogSidebar from "./LogSidebar";
+import LogSidebar from "./LogSidebar.vue";
 import { useNodeStore } from "@/store/theNode";
 import { computed, ref } from "vue";
 

diff --git a/launcher/src/components/UI/node-page/components/node/clients/ClientButtons.vue b/launcher/src/components/UI/node-page/components/node/clients/ClientButtons.vue
@@ -41,7 +41,7 @@ import { useNodeStore } from '@/store/theNode';
       @mouseenter="footerStore.cursorLocation = `${restart}`"
       @mouseleave="footerStore.cursorLocation = ''"
     >
-      <img src="/img/icon//node-page-icons/service-command-restart.png" alt="icon" class="w-4 active:scale-95" />
+      <img src="/img/icon/node-page-icons/service-command-restart.png" alt="icon" class="w-4 active:scale-95" />
     </button>
     <button
       class="col-span-1 p-1 transition-colors duration-200 bg-gray-900 hover:bg-gray-600 rounded-md"

diff --git a/launcher/src/components/UI/node-page/components/service/ServiceButtons.vue b/launcher/src/components/UI/node-page/components/service/ServiceButtons.vue
@@ -41,7 +41,7 @@
       @mouseenter="footerStore.cursorLocation = `${restart}`"
       @mouseleave="footerStore.cursorLocation = ''"
     >
-      <img src="/img/icon//node-page-icons/service-command-restart.png" alt="icon" class="w-4 active:scale-95" />
+      <img src="/img/icon/node-page-icons/service-command-restart.png" alt="icon" class="w-4 active:scale-95" />
     </button>
     <button
       class="col-span-1 w-full h-full p-1 transition-colors duration-200 bg-[#131313] hover:bg-gray-600 rounded-md"

diff --git a/launcher/src/components/UI/node-page/sections/SidebarSection.vue b/launcher/src/components/UI/node-page/sections/SidebarSection.vue
@@ -93,7 +93,7 @@
 </template>
 
 <script setup>
-import StateModal from "../components/modals/StateModal";
+import StateModal from "../components/modals/StateModal.vue";
 import ControlService from "@/store/ControlService";
 import { useServices } from "@/store/services";
 import { useNodeStore } from "@/store/theNode";

diff --git a/launcher/src/components/UI/server-management/components/two-factor-auth/TwoFactorAuth.vue b/launcher/src/components/UI/server-management/components/two-factor-auth/TwoFactorAuth.vue
@@ -131,7 +131,7 @@
 <script setup>
 import TwoFactorBtn from "./TwoFactorBtn.vue";
 import TwoFactorCheckLine from "./TwoFactorCheckLine.vue";
-import TwoFactoSetupBox from "./TwoFactoSetupBox";
+import TwoFactoSetupBox from "./TwoFactoSetupBox.vue";
 import TwoFactorBackup from "./TwoFactorBackup.vue";
 import { ref, computed, onMounted, onUnmounted } from "vue";
 import { useTwoFactorAuth } from "@/store/twoFactorAuth";

diff --git a/launcher/src/components/UI/services-modal/ObolModal.vue b/launcher/src/components/UI/services-modal/ObolModal.vue
@@ -144,7 +144,7 @@
 import { useNodeHeader } from "@/store/nodeHeader";
 import EnrGenerator from "./EnrGenerator.vue";
 import { ref, onMounted } from "vue";
-import ConfirmBox from "./plugin/ConfirmBox";
+import ConfirmBox from "./plugin/ConfirmBox.vue";
 import ControlService from "@/store/ControlService";
 
 const importedENR = ref("");

diff --git a/launcher/src/components/UI/services-modal/SsvDkg.vue b/launcher/src/components/UI/services-modal/SsvDkg.vue
@@ -56,7 +56,7 @@
 <script setup>
 import { useNodeHeader } from "@/store/nodeHeader";
 import { ref, onMounted } from "vue";
-import DkgGenerator from "./plugin/DkgGenerator";
+import DkgGenerator from "./plugin/DkgGenerator.vue";
 
 const headerStore = useNodeHeader();
 

diff --git a/launcher/src/components/UI/services-modal/SsvModal.vue b/launcher/src/components/UI/services-modal/SsvModal.vue
@@ -168,7 +168,7 @@ import axios from "axios";
 import { toRaw } from "vue";
 import ConfirmBox from "./plugin/ConfirmBox.vue";
 import ImportBox from "./plugin/ImportBox.vue";
-import PasswordBox from "./plugin/PasswordBox";
+import PasswordBox from "./plugin/PasswordBox.vue";
 import { useRestartService } from "@/composables/services";
 import { useNodeManage } from "@/store/nodeManage";
 const JSZip = require("jszip");

diff --git a/launcher/src/components/UI/setting-page/SettingScreen.vue b/launcher/src/components/UI/setting-page/SettingScreen.vue
@@ -27,10 +27,10 @@
 </template>
 <script setup>
 import SideBar from "./section/SideBar.vue";
-import MainBox from "./section/MainBox";
-import SidebarBtn from "./components/SidebarBtn";
-import ItemRow from "./section/ItemRow";
-import VolumeSlider from "./components/VolumeSlider";
+import MainBox from "./section/MainBox.vue";
+import SidebarBtn from "./components/SidebarBtn.vue";
+import ItemRow from "./section/ItemRow.vue";
+import VolumeSlider from "./components/VolumeSlider.vue";
 import OutputOptions from "./components/OutputOptions.vue";
 import LanguageBtn from "./components/LanguageBtn.vue";
 import CreditButtons from "./section/CreditButtons.vue";

diff --git a/launcher/src/components/UI/staking-page/StakingScreen.vue b/launcher/src/components/UI/staking-page/StakingScreen.vue
@@ -54,7 +54,7 @@ import RemoveGroup from "./components/modals/RemoveGroup.vue";
 import RemoveValidators from "./components/modals/RemoveValidators.vue";
 import RiskWarning from "./components/modals/RiskWarning.vue";
 import WithdrawMultiple from "./components/modals/WithdrawMultiple.vue";
-import ListSection from "./sections/ListSection";
+import ListSection from "./sections/ListSection.vue";
 import ManagementSection from "./sections/ManagementSection.vue";
 import SidebarSection from "./sections/SidebarSection.vue";
 

diff --git a/launcher/src/components/UI/staking-page/components/management/EpochDuty.vue b/launcher/src/components/UI/staking-page/components/management/EpochDuty.vue
@@ -11,7 +11,7 @@ import { ref } from 'vue';
 
 <script setup>
 import DutyHeader from "./components/epoch-duty/DutyHeader.vue";
-import DutyBody from "./components/epoch-duty/DutyBody";
+import DutyBody from "./components/epoch-duty/DutyBody.vue";
 import DutyFooter from "./components/epoch-duty/DutyFooter.vue";
 import { ref, onMounted, onUnmounted, computed } from "vue";
 import { useStakingStore } from "@/store/theStaking";

diff --git a/...src/components/UI/staking-page/components/management/components/epoch-duty/BlockEpoch.vue b/...src/components/UI/staking-page/components/management/components/epoch-duty/BlockEpoch.vue
@@ -12,7 +12,7 @@
   </div>
 </template>
 <script setup>
-import TheEpoch from "./TheEpoch";
+import TheEpoch from "./TheEpoch.vue";
 
 const { epoch } = defineProps({
   epoch: {

diff --git a/launcher/src/components/UI/welcome-page/components/WelcomeBody.vue b/launcher/src/components/UI/welcome-page/components/WelcomeBody.vue
@@ -3,7 +3,7 @@
     <div class="col-start-1 col-end-13 row-start-1 row-end-2 w-full h-full flex justify-center items-center">
       <span class="text-xl text-gray-300 font-normal text-center">{{ $t("welcomePage.chooseInstallNode") }}</span>
     </div>
-    <div class="col-start-1 col-end-13 row-start-2 row-end-7 w-full h-full flex justify-evenly items-center space-x-2">
+    <div class="col-start-1 col-end-13 row-start-2 row-end-7 w-full h-full flex justify-evenly items-center space-x-2 bg-white">
       <CardItem v-for="item in welStore.installationOptions" :key="item" :item="item" />
     </div>
   </div>

diff --git a/launcher/src/index.html b/launcher/src/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Stereum Launcher</title>
+    <link rel="stylesheet" href="/output.css" />
+  </head>
+  <body>
+    <noscript>
+      <strong> We're sorry but Stereum Launcher doesn't work properly without JavaScript enabled. Please enable it to continue. </strong>
+    </noscript>
+    <div id="app"></div>
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>
diff --git a/launcher/src/pages/LoginPage.vue.vue → launcher/src/pages/LoginPage.vue b/launcher/src/pages/LoginPage.vue.vue → launcher/src/pages/LoginPage.vue
diff --git a/launcher/src/router/index.js b/launcher/src/router/index.js
@@ -2,7 +2,7 @@ import { createRouter, createWebHashHistory } from "vue-router";
 
 // import BaseHome from "../pages/BaseHome.vue";
 import LanguagePage from "../pages/LanguagePage.vue";
-import LoginPage from "../pages/LoginPage.vue";
+import LoginPage from "@/pages/LoginPage.vue";
 import OneclickPage from "@/pages/OneclickPage.vue";
 import SelectPreset from "../../src/components/UI/one-click/sections/SelectPreset.vue";
 import ConfigPlugins from "../../src/components/UI/one-click/sections/ConfigPlugins.vue";

diff --git a/launcher/tailwind.config.js b/launcher/tailwind.config.js
@@ -1,5 +1,6 @@
 module.exports = {
-  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+  content: ["./src/index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+
   theme: {
     extend: {
       backgroundImage: {

diff --git a/launcher/vite.config.js b/launcher/vite.config.js
@@ -0,0 +1,23 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import path from "path";
+
+export default defineConfig({
+  root: "src", // your app's entry point
+  publicDir: path.resolve(__dirname, "public"), // ✅ Tell Vite where static files are
+  base: "./",
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "src"),
+    },
+  },
+  build: {
+    outDir: path.resolve(__dirname, "dist"),
+    emptyOutDir: true,
+  },
+  server: {
+    port: 5173,
+  },
+  assetsInclude: ["**/*.png", "**/*.jpg", "**/*.jpeg", "**/*.gif", "**/*.svg"],
+});