refactor: create main events service and fix setup style

electron/autoUpdaterManager.ts

@@ -2,8 +2,6 @@ import { autoUpdater } from 'electron-updater'
 import { BrowserWindow, MessageBoxOptions, dialog } from 'electron'
 import { WalletManager } from './walletManager'
 import { Actions } from './main'
-import { IPC_ACTIONS } from './ipc/ipcActions'
-const { SET_MESSAGE } = IPC_ACTIONS.Window
 
 export class AutoUpdaterManager {
   public isBeingUpdated: boolean = false
@@ -18,18 +16,10 @@ export class AutoUpdaterManager {
   public run(actions: Actions) {
     console.log('running auto updater...')
     autoUpdater.checkForUpdatesAndNotify()
-    this.win.webContents.send(SET_MESSAGE, 'AUTO UPDATER BEFORE CHECK')
-    this.win.webContents.send(
-      SET_MESSAGE,
-      autoUpdater.currentVersion,
-      autoUpdater.getFeedURL(),
-    )
     autoUpdater.on('update-available', () => {
-      this.win.webContents.send(SET_MESSAGE, 'Update available')
       this.showDialog()
     })
     autoUpdater.on('error', err => {
-      this.win.webContents.send(SET_MESSAGE, 'Error in auto-updater. ' + err)
       console.log('Error in auto-updater. ' + err)
     })
     autoUpdater.on('update-downloaded', () => {
@@ -40,7 +30,6 @@ export class AutoUpdaterManager {
   }
 
   showDialog() {
-    this.win.webContents.send(SET_MESSAGE, 'update available')
     const options = {
       type: 'info',
       title: 'DOClever',
@@ -68,7 +57,6 @@ export class AutoUpdaterManager {
   }
 
   private closeWindowAndRestart(actions: Actions) {
-    this.win.webContents.send(SET_MESSAGE, 'close window and restart')
     actions.killWalletProcess()
     autoUpdater.quitAndInstall(false, true)
     if (this.win == null) {

electron/main/index.ts

@@ -16,7 +16,7 @@ import { WalletManager } from '../walletManager'
 import { IPC_ACTIONS } from '../ipc/ipcActions'
 import { AutoUpdaterManager } from '../autoUpdaterManager'
 
-const { SHUTDOWN, SET_MESSAGE, SHUTDOWN_FINISHED } = IPC_ACTIONS.Window
+const { SHUTDOWN, SHUTDOWN_FINISHED } = IPC_ACTIONS.Window
 
 globalThis.__filename = fileURLToPath(import.meta.url)
 globalThis.__dirname = dirname(__filename)
@@ -43,7 +43,6 @@ if (!app.requestSingleInstanceLock()) {
 // process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
 
 let win: BrowserWindow | null = null
-let walletPid
 let walletManager: WalletManager
 // Here, you can also use other preload
 const preload = join(__dirname, '../preload/index.mjs')
@@ -66,12 +65,10 @@ async function createWindow() {
 
   walletManager = new WalletManager(win?.webContents)
   walletManager.run(actions)
-  win?.webContents.send(SET_MESSAGE)
 
   if (!process.env.VITE_DEV_SERVER_URL) {
     // Hide electron toolbar in production environment
-    // win.setMenuBarVisibility(false)
-    win.webContents.openDevTools()
+    win.setMenuBarVisibility(false)
     const menu = Menu.buildFromTemplate([
       {
         label: 'Menu',
@@ -123,22 +120,16 @@ async function createWindow() {
   })
 }
 
-function setWalletPid(pid: number) {
-  walletPid = pid
-}
-
 export type Actions = {
   closeWindow: () => unknown
   relaunch: () => unknown
-  setWalletPid: (pid: number) => unknown
   quitApp: () => unknown
   killWalletProcess: () => unknown
 }
 
 const actions: Actions = {
   relaunch: relaunch,
   closeWindow: closeWindow,
-  setWalletPid: setWalletPid,
   quitApp: quitApp,
   killWalletProcess: killWalletProcess,
 }
@@ -155,7 +146,6 @@ app.on('window-all-closed', () => {
 app.on('window-all-closed', (event: Event) => {
   event.preventDefault()
   win?.webContents.send(SHUTDOWN)
-  // window.electron.sendShutdownMessage()
 })
 
 app.on('second-instance', () => {

electron/walletManager.ts

@@ -164,7 +164,7 @@ export class WalletManager {
       }
 
       if (!this.isUpdating) {
-        this.runWallet(actions)
+        this.runWallet()
       }
     } else {
       this.webContents.send(SET_OS_NOT_SUPPORTED)
@@ -305,7 +305,7 @@ export class WalletManager {
   }
 
   // Run Witnet wallet and load "ready" url
-  public async runWallet(actions: Actions) {
+  public async runWallet() {
     await sleep(3000)
     console.info('Running wallet...')
     this.webContents.send(SET_RUNNING_STATUS)
@@ -334,10 +334,6 @@ export class WalletManager {
     this.walletProcess?.stderr.on('data', function (data) {
       console.info('stderr: ' + data.toString())
     })
-
-    if (this.walletProcess.pid) {
-      actions.setWalletPid(this.walletProcess.pid)
-    }
   }
 }
 

src/App.vue

@@ -32,22 +32,13 @@ import { LANGUAGES } from '@/constants'
 import { useRoute, useRouter } from 'vue-router'
 import { type LocaleCodes } from '@/types'
 import { useIdle } from '@vueuse/core'
+import { listenIpcMainEvents } from '@/services/handleIpcEvents'
 
 const loading = ref(true)
 const transitionName: Ref<string> = ref('no-transition')
 const route = useRoute()
 const router = useRouter()
 let polling: null | ReturnType<typeof setInterval>
-import {
-  onDownloadedStatus,
-  onRunningStatus,
-  onLoadedStatus,
-  onDownloadProgress,
-  onOSNotSupported,
-  onMessage,
-  onShutdown,
-} from '@/ipc/ipcEvents'
-import { sendShutdownFinished } from '@/ipc/ipcMessages'
 
 const store = useStore()
 const { idle } = useIdle(5 * 60 * 1000) // 5 min
@@ -76,32 +67,7 @@ onMounted(() => {
   window.onpopstate = function (event) {
     event.stopImmediatePropagation()
   }
-  //TODO: move to a service
-  onShutdown(async () => {
-    await store.dispatch('shutdown')
-    sendShutdownFinished()
-  })
-  onMessage((message: string) => {
-    console.log('Message from Auto Updater', message)
-  })
-  onDownloadProgress((progress: any) => {
-    store.commit('setProgress', { progress: progress.percentage })
-  })
-  onDownloadedStatus(() => {
-    store.commit('setMessage', { message: 'wallet up to date' })
-  })
-  onLoadedStatus((message: any) => {
-    if (Array.isArray(message) && message[0].isDefaultWallet) {
-      store.commit('setWalletOwner', { isDefaultWallet: true })
-    }
-    store.commit('setMessage', { message: 'loaded' })
-  })
-  onRunningStatus(() => {
-    store.commit('setMessage', { message: 'Running wallet' })
-  })
-  onOSNotSupported(() => {
-    router.push('/wallet-not-found')
-  })
+  listenIpcMainEvents({ store, router })
 })
 onBeforeUnmount(() => {
   if (polling) {

src/services/handleIpcEvents.ts

@@ -0,0 +1,45 @@
+import {
+  onDownloadedStatus,
+  onRunningStatus,
+  onLoadedStatus,
+  onDownloadProgress,
+  onOSNotSupported,
+  onMessage,
+  onShutdown,
+} from '@/ipc/ipcEvents'
+import { sendShutdownFinished } from '@/ipc/ipcMessages'
+import { Router } from 'vue-router'
+
+export function listenIpcMainEvents({
+  store,
+  router,
+}: {
+  store: any
+  router: Router
+}) {
+  onShutdown(async () => {
+    await store.dispatch('shutdown')
+    sendShutdownFinished()
+  })
+  onMessage((message: string) => {
+    console.log('Message from Main process:', message)
+  })
+  onDownloadProgress((progress: any) => {
+    store.commit('setProgress', { progress: progress.percentage })
+  })
+  onDownloadedStatus(() => {
+    store.commit('setMessage', { message: 'wallet up to date' })
+  })
+  onLoadedStatus((message: any) => {
+    if (Array.isArray(message) && message[0].isDefaultWallet) {
+      store.commit('setWalletOwner', { isDefaultWallet: true })
+    }
+    store.commit('setMessage', { message: 'loaded' })
+  })
+  onRunningStatus(() => {
+    store.commit('setMessage', { message: 'Running wallet' })
+  })
+  onOSNotSupported(() => {
+    router.push('/wallet-not-found')
+  })
+}

src/styles/theme.scss

@@ -11,6 +11,7 @@
   --el-fill-color-blank: #{--app-background-color};
   --el-text-color-primary: #{--text-high-emphasis};
   --el-text-color-primary: #{var(--text-high-emphasis)};
+  --el-border-color-lighter: #{$grey-dark-1};
 
   // tag
   --tag-background: #{$green-dark};
@@ -260,6 +261,7 @@
   --el-bg-color-overlay: #{--dropdown-background};
   --el-fill-color-blank: #{--app-background-color};
   --el-text-color-primary: #{var(--text-high-emphasis)};
+  --el-border-color-lighter: #{$grey-dark-0};
 
   // tag
   --tag-background: #{$green-3};

src/views/Setup.vue

@@ -28,13 +28,13 @@
           <p class="progress-subtitle">
             {{ format(percentage) }}
             <DotsLoading
-              v-if="!synced && theme === THEMES.DARK"
+              v-if="theme === THEMES.DARK"
               color="#d6d6d6"
               data-test="loading-spinner"
               class="spinner"
             />
             <DotsLoading
-              v-if="!synced && theme === THEMES.LIGHT"
+              v-if="theme === THEMES.LIGHT"
               color="#444258"
               data-test="loading-spinner"
               class="spinner"