cleanup & typing for electron

src/App.tsx

@@ -75,12 +75,12 @@ export default function App() {
         'padding: 3px 5px; border-radius: 5px; color: #ffffff; background-color: #038fc7;'
       )
     if (isElectron()) {
-      ;(window as any)?.api?.send('toMain', { command: 'get-platform' })
-      ;(window as any)?.api?.send('toMain', { command: 'get-core-params' })
-      ;(window as any)?.api?.send('toMain', { command: 'close-others' })
+      window.api.send('toMain', { command: 'get-platform' })
+      window.api.send('toMain', { command: 'get-core-params' })
+      window.api.send('toMain', { command: 'close-others' })
     }
   }, [])
-  ;(window as any).api?.receive('fromMain', (parameters: any) => {
+  window.api?.receive('fromMain', (parameters: any) => {
     if (parameters === 'shutdown') {
       shutdown()
     }

src/app/app/utils/createLedFxFolder.mts

@@ -0,0 +1,14 @@
+import * as path from 'path'
+import * as fs from 'fs'
+import { app } from 'electron'
+
+export function createLedfxFolder() {
+  const userDataPath = app.getPath('userData')
+  const ledfxFolderPath = path.join(userDataPath, '.ledfx-cc')
+  if (!fs.existsSync(ledfxFolderPath)) {
+    console.log('Creating .ledfx-cc folder')
+    fs.mkdirSync(ledfxFolderPath)
+  }
+}
+
+export default createLedfxFolder

src/app/app/utils/getReduxPath.mts

@@ -0,0 +1,39 @@
+import * as path from 'path'
+import * as fs from 'fs'
+import { app } from 'electron'
+
+export function getReduxPath(): string | false {
+  const appDataPath = app.getPath('appData')
+  const localAppDataPath = path.join(appDataPath, '..', 'Local')
+  const chromeExtensionsPath = path.join(
+    localAppDataPath,
+    'Google',
+    'Chrome',
+    'User Data',
+    'Default',
+    'Extensions'
+  )
+  const reduxDevtoolsId = 'lmhkpmbekcpmknklioeibfkpmmfibljd'
+
+  if (fs.existsSync(chromeExtensionsPath)) {
+    const reduxDevtoolsDir = path.join(chromeExtensionsPath, reduxDevtoolsId)
+    if (fs.existsSync(reduxDevtoolsDir)) {
+      const versions = fs.readdirSync(reduxDevtoolsDir)
+      if (versions.length > 0) {
+        const latestVersion = versions.sort().pop() // Get the latest version
+        if (latestVersion !== undefined) {
+          const reduxDevtoolsPath = path.join(reduxDevtoolsDir, latestVersion)
+          if (fs.existsSync(reduxDevtoolsPath)) {
+            return reduxDevtoolsPath
+          }
+        }
+      }
+    }
+  } else {
+    console.info('Chrome extensions path does not exist:', chromeExtensionsPath)
+  }
+
+  return false
+}
+
+export default getReduxPath

src/app/electron.ts

@@ -1,4 +1,3 @@
-import fs from 'fs'
 import path from 'path'
 import isDev from 'electron-is-dev'
 import {
@@ -17,15 +16,14 @@ import { handleProtocol, setupProtocol } from './app/protocol.mjs'
 import { closeAllSubs, startInstance } from './app/instances.mjs'
 import { createTray } from './app/utils/tray.mjs'
 import { handlers } from './app/handlers.mjs'
+import getReduxPath from './app/utils/getReduxPath.mjs'
+import createLedfxFolder from './app/utils/createLedFxFolder.mjs'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
 
 EventEmitter.defaultMaxListeners = 15
 
-const reduxDevtoolsPath =
-  'C:\\Users\\Blade\\AppData\\Local\\Google\\Chrome\\User Data\\Default\\Extensions\\lmhkpmbekcpmknklioeibfkpmmfibljd\\3.2.7_0'
-
 const subpy: any = null
 const subprocesses: Record<string, any> = {}
 let wind: BrowserWindow | null = null
@@ -34,14 +32,12 @@ const win: BrowserWindow | null = null
 setupProtocol()
 const gotTheLock = app.requestSingleInstanceLock()
 
-if (!fs.existsSync(path.join(app.getPath('userData'), '.ledfx-cc'))) {
-  console.log('Creating .ledfx-cc folder')
-  fs.mkdirSync(path.join(app.getPath('userData'), '.ledfx-cc'))
-}
+const reduxDevtoolsPath = getReduxPath()
+createLedfxFolder()
 
 const ready = () =>
   app.whenReady().then(async () => {
-    if (isDev) {
+    if (isDev && reduxDevtoolsPath) {
       await session.defaultSession.loadExtension(reduxDevtoolsPath)
     }
     nativeTheme.themeSource = 'dark'

src/components/Bars/BarTop.tsx

@@ -567,7 +567,7 @@ const TopBar = () => {
                   Change Host
                 </MenuItem>
                 {/* <MenuItem onClick={()=>{
-                  ;(window as any).api.send('toMain', {
+                  window .api.send('toMain', {
                     command: 'toggle-darkmode'
                   })
                 }}>

src/components/Dialogs/Instances.tsx

@@ -45,15 +45,15 @@ const Instances = ({
 
   const handleStartCore = (e: any, p: number) => {
     e.stopPropagation()
-    ;(window as any).api.send('toMain', {
+    window.api.send('toMain', {
       command: 'start-core-instance',
       instance: instance || `instance${i}`,
       port: p
     })
   }
   const handleStopCore = (e: any, p: number) => {
     e.stopPropagation()
-    ;(window as any).api.send('toMain', {
+    window.api.send('toMain', {
       command: 'stop-core-instance',
       instance,
       port: p
@@ -62,13 +62,13 @@ const Instances = ({
   const handleDelete = (e: any, p: number) => {
     e.stopPropagation()
     if (instance) {
-      ;(window as any).api.send('toMain', {
+      window.api.send('toMain', {
         command: 'delete-core-instance',
         instance,
         port: p
       })
     } else {
-      ;(window as any).api.send('toMain', {
+      window.api.send('toMain', {
         command: 'delete-core-params',
         instance: 'all'
       })
@@ -283,7 +283,7 @@ const Instances = ({
                 }
                 aria-label="open-config"
                 onClick={() => {
-                  ;(window as any).api.send('toMain', {
+                  window.api.send('toMain', {
                     command: 'open-config',
                     instance
                   })

src/components/OneTimePassword.tsx

@@ -14,7 +14,7 @@ const OneTimePassword = ({ enabled }: { enabled: boolean }) => {
   }
 
   const handleSubmit = useCallback(async () => {
-    ;(window as any).api?.send('toMain', {
+    window.api?.send('toMain', {
       command: 'verify_otp',
       token: otp
     })
@@ -26,11 +26,11 @@ const OneTimePassword = ({ enabled }: { enabled: boolean }) => {
   }, [otp])
 
   useEffect(() => {
-    ;(window as any).api?.send('toMain', {
+    window.api?.send('toMain', {
       command: 'generate-mfa-qr',
       user
     })
-    ;(window as any).api?.receive('fromMain', (args: any) => {
+    window.api?.receive('fromMain', (args: any) => {
       if (args[0] === 'mfa-verified') {
         setInvalidCode(!args[1])
         if (args[1]) {

src/index.tsx

@@ -6,6 +6,16 @@ import reportWebVitals from './reportWebVitals'
 import ErrorBoundary from './utils/ErrorBoundary'
 // import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 
+declare global {
+  interface Window {
+    api: {
+      send: (_channel: string, _data: any) => void
+      receive: (_channel: string, _func: (_data: any) => void) => void
+      yz: boolean
+    }
+  }
+}
+
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 root.render(
   <ErrorBoundary>

src/pages/Lock.tsx

@@ -16,8 +16,8 @@ const Lock = () => {
   }
 
   useEffect(() => {
-    ;(window as any).api?.send('toMain', { command: 'generate-mfa-qr', user })
-    ;(window as any).api?.receive('fromMain', (args: any) => {
+    window.api?.send('toMain', { command: 'generate-mfa-qr', user })
+    window.api?.receive('fromMain', (args: any) => {
       if (args[0] === 'mfa-qr-code') {
         setQrCodePng(args[1])
       }

src/pages/Settings/GeneralCard.tsx

@@ -104,7 +104,7 @@ const GeneralCard = () => {
               <SettingsButton
                 startIcon={<CloudUpload />}
                 onClick={() =>
-                  (window as any).api.send('toMain', { command: 'open-config' })
+                  window.api.send('toMain', { command: 'open-config' })
                 }
               >
                 Config Location
@@ -141,7 +141,7 @@ const GeneralCard = () => {
               <SettingsButton
                 startIcon={<PowerSettingsNew />}
                 onClick={() => {
-                  ;(window as any).api.send('toMain', { command: 'start-core' })
+                  window.api.send('toMain', { command: 'start-core' })
                 }}
               >
                 Start Core

tsconfig.electron.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
-    "typeRoots": ["node_modules/@types"],
+    "typeRoots": ["node_modules/@types", "src/typings"],
     "types": ["node"],
     "allowJs": true,
     "esModuleInterop": true,

tsconfig.json

@@ -3,6 +3,7 @@
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "typeRoots": ["node_modules/@types", "src/typings"],
+    "types": [],
     "allowJs": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
@@ -17,5 +18,7 @@
     "jsx": "react-jsx",
     "skipLibCheck": true,
   },
-  "include": ["src"]
+  "include": [
+    "src/**/*"
+  ]
 }