feat: load setup view and fix ipc services

electron/ipc/ipcActions.ts

@@ -0,0 +1,12 @@
+export const IPC_ACTIONS = {
+  Window: {
+    SET_MESSAGE: 'SET_MESSAGE',
+    SHUTDOWN: 'SHUTDOWN',
+    SET_RUNNING_STATUS: 'SET_RUNNING_STATUS',
+    SET_DOWNLOADED_STATUS: 'SET_DOWNLOADED_STATUS',
+    SET_DOWNLOADING_STATUS: 'SET_DOWNLOADING_STATUS',
+    SET_LOADED_STATUS: 'SET_LOADED_STATUS',
+    SET_DOWNLOAD_PROGRESS: 'SET_DOWNLOAD_PROGRESS',
+    SET_OS_NOT_SUPPORTED: 'SET_OS_NOT_SUPPORTED',
+  },
+}

electron/main/index.ts

@@ -13,8 +13,10 @@ import { join, dirname } from 'node:path'
 import { release } from 'os'
 import { app, BrowserWindow, shell, ipcMain, Menu } from 'electron'
 import kill from 'tree-kill'
-import { Status, STATUS_PATH } from '../constants'
 import { WalletManager } from '../walletManager'
+import { IPC_ACTIONS } from '../ipc/ipcActions'
+
+const { SHUTDOWN } = IPC_ACTIONS.Window
 
 globalThis.__filename = fileURLToPath(import.meta.url)
 globalThis.__dirname = dirname(__filename)
@@ -41,7 +43,6 @@ if (!app.requestSingleInstanceLock()) {
 // process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
 
 let win: BrowserWindow | null = null
-let status: Status
 let walletPid
 // Here, you can also use other preload
 const preload = join(__dirname, '../preload/index.mjs')
@@ -58,46 +59,42 @@ async function createWindow() {
     minHeight: 720,
     webPreferences: {
       preload,
-      // Warning: Enable nodeIntegration and disable contextIsolation is not secure in production
-      // Consider using contextBridge.exposeInMainWorld
-      // Read more on https://www.electronjs.org/docs/latest/tutorial/context-isolation
-      // todo: fix
-      // nodeIntegration: true,
-      // contextIsolation: false,
     },
     autoHideMenuBar: true,
   })
 
+  new WalletManager(win?.webContents).run(actions)
+
   if (!process.env.VITE_DEV_SERVER_URL) {
     // Hide electron toolbar in production environment
-    win.setMenuBarVisibility(false)
-    const menu = Menu.buildFromTemplate([
-      {
-        label: 'Menu',
-        submenu: [
-          {
-            label: 'Quit',
-            accelerator: 'CmdOrCtrl+Q',
-            click: () => {
-              sendShutdownMessage()
-            },
-          },
-          { label: 'Reload', accelerator: 'CmdOrCtrl+R', click: () => {} },
-          { label: 'ZoomOut', accelerator: 'CmdOrCtrl+-', click: () => {} },
-          { label: 'ZoomIn', accelerator: 'CmdOrCtrl+Plus', click: () => {} },
-          { label: 'Cut', accelerator: 'CmdOrCtrl+X', role: 'cut' },
-          { label: 'Copy', accelerator: 'CmdOrCtrl+C', role: 'copy' },
-          { label: 'Paste', accelerator: 'CmdOrCtrl+V', role: 'paste' },
-        ],
-      },
-    ])
-    Menu.setApplicationMenu(menu)
+    // win.setMenuBarVisibility(false)
+    // const menu = Menu.buildFromTemplate([
+    //   {
+    //     label: 'Menu',
+    //     submenu: [
+    //       {
+    //         label: 'Quit',
+    //         accelerator: 'CmdOrCtrl+Q',
+    //         click: () => {
+    //           win.webContents.send(SHUTDOWN)
+    //         },
+    //       },
+    //       { label: 'Reload', accelerator: 'CmdOrCtrl+R', click: () => {} },
+    //       { label: 'ZoomOut', accelerator: 'CmdOrCtrl+-', click: () => {} },
+    //       { label: 'ZoomIn', accelerator: 'CmdOrCtrl+Plus', click: () => {} },
+    //       { label: 'Cut', accelerator: 'CmdOrCtrl+X', role: 'cut' },
+    //       { label: 'Copy', accelerator: 'CmdOrCtrl+C', role: 'copy' },
+    //       { label: 'Paste', accelerator: 'CmdOrCtrl+V', role: 'paste' },
+    //     ],
+    //   },
+    // ])
+    // Menu.setApplicationMenu(menu)
   }
 
   if (app.isPackaged) {
     win.loadFile(indexHtml)
   } else {
-    loadUrl(Status.Wait)
+    loadUrl()
     // Open devTool if the app is not packaged
     win.webContents.openDevTools()
   }
@@ -118,46 +115,20 @@ async function createWindow() {
   })
 }
 
-// TODO: Do we need this?
-// // check if the second instance in locked
-// const lock = app.requestSingleInstanceLock()
-// if (!lock) {
-//   app.quit()
-// } else {
-//   app.whenReady().then(() => {})
-// }
-
 function setWalletPid(pid: number) {
   walletPid = pid
 }
 
 export type Actions = {
-  sendShutdownMessage: () => unknown
-  sendDownloadedMessage: () => unknown
-  sendDownloadingMessage: () => unknown
-  sendProgressMessage: (p: number) => void
-  sendRunningMessage: () => unknown
-  sendLoadedMessage: () => unknown
   closeWindow: () => unknown
-  setStatus: (status: Status) => unknown
   setWalletPid: (pid: number) => unknown
 }
 
 const actions: Actions = {
-  sendShutdownMessage: sendShutdownMessage,
-  sendDownloadedMessage: sendDownloadedMessage,
-  sendDownloadingMessage: sendDownloadingMessage,
-  sendProgressMessage: sendProgressMessage,
-  sendRunningMessage: sendRunningMessage,
-  sendLoadedMessage: sendLoadedMessage,
   closeWindow: closeWindow,
-  setStatus: setStatus,
   setWalletPid: setWalletPid,
 }
 
-const walletManager = new WalletManager()
-walletManager.run(actions)
-
 app.whenReady().then(() => {
   createWindow()
 })
@@ -169,7 +140,8 @@ app.on('window-all-closed', () => {
 
 app.on('window-all-closed', (event: Event) => {
   event.preventDefault()
-  sendShutdownMessage()
+  win?.webContents.send(SHUTDOWN)
+  // window.electron.sendShutdownMessage()
 })
 
 app.on('second-instance', () => {
@@ -216,30 +188,6 @@ ipcMain.handle('open-win', (event, arg) => {
   }
 })
 
-function sendShutdownMessage() {
-  win?.webContents.send('shutdown')
-}
-
-function sendDownloadedMessage() {
-  win?.webContents.send('downloaded')
-}
-
-function sendDownloadingMessage() {
-  win?.webContents.send('downloading')
-}
-
-function sendProgressMessage(progress: number) {
-  win?.webContents.send('progress', progress)
-}
-
-function sendRunningMessage() {
-  win?.webContents.send('running')
-}
-
-function sendLoadedMessage() {
-  win?.webContents.send('loaded', [{ isDefaultWallet: true }])
-}
-
 function closeWindow() {
   win.close()
 }
@@ -251,24 +199,19 @@ function closeApp(event: Event) {
   if (event) {
     event.preventDefault()
   }
-  sendShutdownMessage()
-}
-
-function setStatus(s: Status) {
-  status = s
-  loadUrl(status)
+  win?.webContents.send(SHUTDOWN)
+  // window.electron.sendShutdownMessage()
 }
 
 // load a url if browser window is ready according to the current status
-function loadUrl(status: Status) {
+function loadUrl() {
   if (win) {
     if (url) {
       // Load the url of the dev server if in development mode
-      win.loadURL(`${url}#/${STATUS_PATH[status]}`)
+      win.loadURL(url)
     } else {
-      // TODO: handle load url pro
       // Load the index.html when not in development
-      // this.win.loadURL(`app://./index.html/#/${STATUS_PATH[status]}`)
+      win.loadURL(`app://${indexHtml}`)
     }
   }
 }

electron/preload/index.ts

@@ -1,4 +1,15 @@
 import { ipcRenderer, contextBridge } from 'electron'
+import { IPC_ACTIONS } from '../ipc/ipcActions'
+const {
+  SET_MESSAGE,
+  SHUTDOWN,
+  SET_RUNNING_STATUS,
+  SET_DOWNLOADED_STATUS,
+  SET_DOWNLOADING_STATUS,
+  SET_DOWNLOAD_PROGRESS,
+  SET_LOADED_STATUS,
+  SET_OS_NOT_SUPPORTED,
+} = IPC_ACTIONS.Window
 
 // --------- Expose some API to the Renderer process ---------
 contextBridge.exposeInMainWorld('ipcRenderer', withPrototype(ipcRenderer))
@@ -117,3 +128,30 @@ window.onmessage = ev => {
 }
 
 setTimeout(removeLoading, 4999)
+
+contextBridge.exposeInMainWorld('ipcAPI', {
+  onShutdown: (fn: any) => {
+    ipcRenderer.on(SHUTDOWN, (event, ...args) => fn(...args))
+  },
+  onMessage: (fn: any) => {
+    ipcRenderer.on(SET_MESSAGE, (event, ...args) => fn(...args))
+  },
+  onRunningStatus: (fn: any) => {
+    ipcRenderer.on(SET_RUNNING_STATUS, (event, ...args) => fn(...args))
+  },
+  onDownloadedStatus: (fn: any) => {
+    ipcRenderer.on(SET_DOWNLOADED_STATUS, (event, ...args) => fn(...args))
+  },
+  onDownloadingStatus: (fn: any) => {
+    ipcRenderer.on(SET_DOWNLOADING_STATUS, (event, ...args) => fn(...args))
+  },
+  onLoadedStatus: (fn: any) => {
+    ipcRenderer.on(SET_LOADED_STATUS, (event, ...args) => fn(...args))
+  },
+  onDownloadProgress: (fn: any) => {
+    ipcRenderer.on(SET_DOWNLOAD_PROGRESS, (event, ...args) => fn(...args))
+  },
+  onOSNotSupported: (fn: any) => {
+    ipcRenderer.on(SET_OS_NOT_SUPPORTED, (event, ...args) => fn(...args))
+  },
+})

electron/walletManager.ts

@@ -22,6 +22,16 @@ import {
   OS_ARCH,
   RELEASE_BASE_URL,
 } from './constants'
+import { IPC_ACTIONS } from './ipc/ipcActions'
+
+const {
+  SET_RUNNING_STATUS,
+  SET_DOWNLOADED_STATUS,
+  SET_DOWNLOADING_STATUS,
+  SET_LOADED_STATUS,
+  SET_DOWNLOAD_PROGRESS,
+  SET_OS_NOT_SUPPORTED,
+} = IPC_ACTIONS.Window
 
 import { Actions } from './main/index'
 
@@ -77,6 +87,7 @@ interface GithubTagInfo {
 }
 
 export class WalletManager {
+  public webContents: Electron.WebContents | null
   public isUpdating: boolean = false
   public walletProcess: cp.ChildProcessWithoutNullStreams | null = null
   private existDirectory: boolean
@@ -89,7 +100,8 @@ export class WalletManager {
     linux: this.decompressLinuxWallet,
   }[PLATFORM]
 
-  constructor() {
+  constructor(webContents: Electron.WebContents | null) {
+    this.webContents = webContents
     this.existDirectory = fs.existsSync(SHEIKAH_PATH)
   }
 
@@ -148,15 +160,15 @@ export class WalletManager {
       if (this.needToDownloadWallet) {
         await this.downloadWallet(actions, downloadUrl)
       } else {
-        actions.sendDownloadedMessage()
+        this.webContents.send(SET_DOWNLOADED_STATUS)
         await sleep(3000)
       }
 
       if (!this.isUpdating) {
         this.runWallet(actions)
       }
     } else {
-      actions.setStatus(Status.OsNotSupported)
+      this.webContents.send(SET_OS_NOT_SUPPORTED)
       console.info('Your OS is not supported yet')
     }
   }
@@ -171,9 +183,8 @@ export class WalletManager {
     console.info(
       `Fetching release from: ${RELEASE_BASE_URL}${this.witnetRustVersion}`,
     )
-    actions.sendDownloadingMessage()
+    this.webContents.send(SET_DOWNLOADING_STATUS)
     await sleep(2500)
-    actions.setStatus(Status.Wait)
     // FIXME: Remove promise and use async / await
     return new Promise<void>(resolve => {
       axios
@@ -273,7 +284,7 @@ export class WalletManager {
       time: 100 /* ms */,
     })
     str.on('progress', (progress: number) => {
-      actions.sendProgressMessage(progress)
+      this.webContents.send(SET_DOWNLOAD_PROGRESS, progress)
     })
     const pipeline = util.promisify(stream.pipeline)
     // Promise equivalent for response.data.pipe(writeStream)
@@ -298,7 +309,7 @@ export class WalletManager {
   public async runWallet(actions: Actions) {
     await sleep(3000)
     console.info('Running wallet...')
-    // this.app.sendRunningMessage()
+    this.webContents.send(SET_RUNNING_STATUS)
     await sleep(3000)
 
     const walletConfigurationPath = path.join(SHEIKAH_PATH, 'witnet.toml')
@@ -317,9 +328,8 @@ export class WalletManager {
     )
     this.walletProcess?.stdout.on('data', async data => {
       console.info('stdout: ' + data.toString())
-      // this.app.sendLoadedMessage()
+      this.webContents.send(SET_LOADED_STATUS, [{ isDefaultWallet: true }])
       await sleep(3000)
-      actions.setStatus(Status.Ready)
     })
 
     this.walletProcess?.stderr.on('data', function (data) {