[TECH] Upgrade Electron and other Dev Dependencies (#1013)

* tech: updated dev dependencies part1

* i18n: update parser settings

* husky: updated scripts

* tech: upgrade dev deps part 2

* chore: lint

* Revert "i18n: update parser settings"

This reverts commit 6a3c451.

* i18n: updated parser config

* revert: upgrade typescript

* chore: fix TS version until further upgrade

* fix: fix all remaining typescript errors

* chore: unused typings

* chore: re-add proxy option to achievementState

* chore: yarn.lock and fixed ts version

* tech: update types packages

* tech: upgrade electron to v32

* fix: windows build

* chore: downgrade hp-ui

* fix: codecheck again

* chore: remove proxy from makeautoObservable

---------

Co-authored-by: Flavio F Lima <flavioislima@users.noreply.github.com>

Author: flavioislima

.husky/post-checkout

@@ -1,2 +1 @@
-#!/bin/bash
 yarn setup

.husky/post-merge

@@ -1,2 +1 @@
-#!/bin/bash
 yarn setup

.husky/pre-commit

@@ -1,2 +1 @@
-#!/bin/bash
 #yarn lint-fix

.husky/pre-push

@@ -1,2 +1 @@
-#!/bin/bash
-yarn codecheck && yarn lint 
+yarn codecheck && yarn lint && yarn i18n --fail-on-update

i18next-parser.config.js

@@ -19,12 +19,18 @@ module.exports = {
   defaultNamespace: 'translation',
   // Default namespace used in your i18next config
 
-  defaultValue: '',
+  defaultValue: null,
   // Default value to give to empty keys
 
   failOnWarnings: false,
   // Exit with an exit code of 1 on warnings
 
+  // If you wish to customize options in internally used i18next instance, you can define an object with any
+  // configuration property supported by i18next (https://www.i18next.com/overview/configuration-options).
+  // { compatibilityJSON: 'v3' } can be used to generate v3 compatible plurals.
+  // settings 'v3' since Weblate is also configured for v3 compatibility
+  i18nextOptions: { compatibilityJSON: 'v3' },
+
   indentation: 4,
   // Indentation of the catalog files
 
@@ -47,10 +53,11 @@ module.exports = {
         attr: 'i18nKey', // Attribute for the keys
         lexer: 'JsxLexer'
       }
-    ]
+    ],
+    default: ['JavascriptLexer']
   },
 
-  lineEnding: 'auto',
+  lineEnding: 'match',
   // Control the line ending. See options at https://github.com/ryanve/eol
 
   locales: ['en'],
@@ -65,16 +72,19 @@ module.exports = {
   // Supports JSON (.json) and YAML (.yml) file formats
   // Where to write the locale files relative to process.cwd()
 
+  // the problem with that is that we need all keys to have a default value otherwise they will be removed
+  // resetDefaultValueLocale: 'en',
+  // The locale to compare with default values to determine whether a default value has been changed.
+  // If this is set and a default value differs from a translation in the specified locale, all entries
+  // for that key across locales are reset to the default value, and existing translations are moved to
+  // the `_old` file.
+
   skipDefaultValues: false,
   // Whether to ignore default values.
 
   sort: true,
   // Whether or not to sort the catalog
 
-  useKeysAsDefaultValue: false,
-  // Whether to use the keys as the default value; ex. "Hello": "Hello", "World": "World"
-  // This option takes precedence over the `defaultValue` and `skipDefaultValues` options
-
   verbose: true
   // Display info about the parsing including some stat
 }

package.json

@@ -169,7 +169,7 @@
     "@fortawesome/react-fontawesome": "^0.1.18",
     "@hyperplay/chains": "^0.3.0",
     "@hyperplay/check-disk-space": "^3.5.2",
-    "@hyperplay/ui": "^1.7.6",
+    "@hyperplay/ui": "1.7.6",
     "@hyperplay/utils": "^0.0.16",
     "@mantine/carousel": "^7.5.1",
     "@mantine/core": "^7.5.1",
@@ -204,7 +204,7 @@
     "crc": "^4.1.1",
     "discord-rich-presence-typescript": "^0.0.8",
     "electron-store": "^8.0.1",
-    "electron-updater": "^5.0.1",
+    "electron-updater": "^6.2.1",
     "embla-carousel-autoplay": ">=7.0.0",
     "embla-carousel-react": ">=7.0.0",
     "ethers": "^6.12.1",
@@ -308,55 +308,54 @@
     ]
   },
   "devDependencies": {
-    "@babel/plugin-transform-arrow-functions": "^7.22.5",
-    "@lavamoat/allow-scripts": "^3.0.2",
-    "@lavamoat/preinstall-always-fail": "^2.0.0",
-    "@playwright/test": "^1.43.1",
-    "@testing-library/dom": "^7.31.0",
-    "@testing-library/jest-dom": "^6.2.0",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.1.1",
-    "@types/chrome": "^0.0.231",
+    "@babel/plugin-transform-arrow-functions": "^7.24.7",
+    "@lavamoat/allow-scripts": "^3.2.0",
+    "@lavamoat/preinstall-always-fail": "^2.1.0",
+    "@playwright/test": "^1.46.0",
+    "@testing-library/dom": "^7.31.2",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^14.3.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/chrome": "^0.0.269",
     "@types/classnames": "^2.3.1",
-    "@types/i18next-fs-backend": "^1.1.2",
-    "@types/ini": "^1.3.31",
-    "@types/jest": "^29.5.11",
-    "@types/node": "^17.0.25",
-    "@types/plist": "^3.0.2",
+    "@types/i18next-fs-backend": "^1.1.5",
+    "@types/ini": "^1.3.34",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.16.2",
+    "@types/plist": "^3.0.5",
     "@types/react": "^18.0.24",
     "@types/react-dom": "^18.0.8",
     "@types/react-router-dom": "^5.3.3",
-    "@types/supertest": "^2.0.12",
-    "@types/tmp": "^0.2.3",
-    "@types/ws": "^8.5.5",
-    "@typescript-eslint/eslint-plugin": "^6.13.2",
-    "@typescript-eslint/parser": "^6.13.2",
-    "@valist/sdk": "^2.9.5",
-    "@vitejs/plugin-react": "^2.2.0",
+    "@types/tmp": "^0.2.6",
+    "@types/ws": "^8.5.12",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@valist/sdk": "^2.9.17",
+    "@vitejs/plugin-react": "^4.3.1",
     "cross-env": "^7.0.3",
-    "electron": "^28.0.0",
+    "electron": "^32.0.1",
     "electron-builder": "^24.13.3",
     "electron-playwright-helpers": "^1.7.1",
-    "electron-vite": "^2.1.0",
+    "electron-vite": "^2.3.0",
     "eslint": "^8.13.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-react": "^7.29.4",
-    "fast-xml-parser": "^4.3.5",
-    "husky": "^7.0.4",
-    "i18next-parser": "^6.3.0",
+    "fast-xml-parser": "^4.4.1",
+    "husky": "^9.1.4",
+    "i18next-parser": "^9.0.1",
     "jest": "^29.7.0",
     "pkg": "^5.8.1",
-    "playwright": "^1.43.1",
-    "prettier": "^2.6.2",
-    "pretty-quick": "^3.1.3",
+    "playwright": "^1.46.0",
+    "prettier": "^2.8.8",
+    "pretty-quick": "^4.0.0",
+    "react-markdown": "^9.0.1",
     "sass": "^1.55.0",
-    "supertest": "^6.2.4",
-    "tmp": "^0.2.1",
+    "tmp": "^0.2.3",
     "ts-jest": "^29.1.1",
     "type-fest": "^3.2.0",
-    "typescript": "^5.3.2",
-    "vite": "^5.2.8",
+    "typescript": "5.3.3",
+    "vite": "^5.4.0",
     "vite-plugin-svgr": "^2.2.2"
   },
   "optionalDependencies": {
@@ -394,7 +393,9 @@
       "viem>ws>bufferutil": true,
       "viem>ws>utf-8-validate": true,
       "@hyperplay/extension-importer>classic-level": true,
-      "classic-level": false
+      "classic-level": false,
+      "i18next-parser>esbuild": false,
+      "wagmi>@wagmi/connectors>@metamask/sdk>@metamask/sdk-communication-layer>utf-8-validate": false
     }
   }
 }

src/backend/config.ts

@@ -342,7 +342,7 @@ class GlobalConfigV0 extends GlobalConfig {
     } as AppSettings
   }
 
-  public setSetting(key: string, value: unknown) {
+  public setSetting(key: keyof AppSettings, value: never) {
     const config = this.getSettings()
     const configStoreSettings = configStore.get_nodefault('settings') || config
     configStore.set('settings', { ...configStoreSettings, [key]: value })

src/backend/main.ts

@@ -167,7 +167,7 @@ import './wiki_game_info/ipc_handler'
 import './recent_games/ipc_handler'
 import './metrics/ipc_handler'
 import 'backend/extension/provider'
-import 'backend/proxy/ipcHandlers.ts'
+import 'backend/proxy/ipcHandlers'
 
 import './ipcHandlers'
 import './ipcHandlers/checkDiskSpace'
@@ -1137,7 +1137,7 @@ ipcMain.handle('refreshLibrary', async (e, library?) => {
   } else {
     const allRefreshPromises = []
     for (const runner_i in libraryManagerMap) {
-      allRefreshPromises.push(libraryManagerMap[runner_i].refresh())
+      allRefreshPromises.push(libraryManagerMap[runner_i as Runner].refresh())
     }
     await Promise.allSettled(allRefreshPromises)
   }

src/backend/storeManagers/gog/library.ts

@@ -244,9 +244,11 @@ export async function refresh(): Promise<ExecResult> {
   for (const chunk of chunks) {
     const settled = await Promise.allSettled(chunk)
     const fulfilled = settled
-      .filter((promise) => promise.status === 'fulfilled')
-      //@ts-expect-error Typescript is confused about this filter statement, it's correct however
-      .map((promise: PromiseFulfilledResult<GameInfo>) => promise.value)
+      .filter(
+        (promise): promise is PromiseFulfilledResult<GameInfo> =>
+          promise.status === 'fulfilled'
+      )
+      .map((promise) => promise.value)
 
     fulfilled.forEach((data: GameInfo) => {
       if (data?.app_name) {
@@ -924,7 +926,7 @@ export async function getProductApi(
     url.searchParams.set('expand', expand.join(','))
   }
 
-  const headers = {}
+  const headers: Record<string, string> = {}
   if (access_token) {
     headers['Authorization'] = `Bearer ${access_token}`
   }

src/backend/storeManagers/hyperplay/games.ts

@@ -10,7 +10,8 @@ import {
   ChannelReleaseMeta,
   SiweValues,
   UpdateArgs,
-  WineCommandArgs
+  WineCommandArgs,
+  Runner
 } from '../../../common/types'
 import { hpLibraryStore } from './electronStore'
 import { sendFrontendMessage, getMainWindow } from 'backend/main_window'
@@ -254,8 +255,18 @@ export async function importGame(
   const channel = gameInfo.channels![
     installInfo.manifest.channelName!
   ] as Channel
-  const mainExe =
-    channel.release_meta.platforms[installInfo.manifest.platform].executable
+  // Accessing the platform data with type assertion
+  const platformKey = installInfo.manifest
+    .platform as keyof PlatformsMetaInterface
+  const platformData = channel.release_meta.platforms[platformKey]
+  if (!platformData || !platformData.executable) {
+    logError(
+      `Platform data not found for ${appName} in importGame`,
+      LogPrefix.HyperPlay
+    )
+    return { stderr: '', stdout: '' }
+  }
+  const mainExe = platformData.executable
   const executable = path.join(pathName, mainExe)
 
   if (!existsSync(executable)) {
@@ -295,7 +306,7 @@ export async function importGame(
 }
 
 export async function runWineCommandOnGame(
-  runner: string,
+  runner: Runner,
   appName: string,
   { commandParts, wait = false, protonVerb, startFolder }: WineCommandArgs
 ): Promise<ExecResult> {

src/common/typedefs/ipcBridge.d.ts

@@ -456,6 +456,7 @@ interface AsyncIPCFunctions extends HyperPlayAsyncIPCFunctions {
     appName: string
   ) => Promise<number | undefined>
   pauseCurrentDownload: () => Promise<void>
+  getQuestsForGame: (projectId: string) => Promise<Quest[]>
 }
 
 // This is quite ugly & throws a lot of errors in a regular .ts file

src/frontend/SentryHandler/index.tsx

@@ -19,6 +19,7 @@ const SentryHandler = () => {
             ? devSentryDsn
             : prodSentryDsn
       },
+      // @ts-expect-error - not sure why is this failling
       reactInit
     )
     setInitialized(true)

src/frontend/components/UI/ChannelNameSelection/index.tsx

@@ -26,7 +26,7 @@ export default function ChannelNameSelection({
       >
         {gameInfo?.channels !== undefined
           ? Object.keys(gameInfo.channels).map((p, i) => {
-              if (!gameInfo.channels) return <div>error</div>
+              if (!gameInfo.channels) return <div key={p}>error</div>
               const channel_i = gameInfo.channels[p]
               return (
                 <option value={p} key={i}>

src/frontend/components/UI/QuestsViewer/components/QuestDetailsWrapper/index.tsx

@@ -68,7 +68,6 @@ async function getRewardClaimGasEstimation(reward: Reward) {
   const viemChain = parseChainMetadataToViemChain(chainMetadata)
 
   const publicClient = createPublicClient({
-    // @ts-expect-error: chain types are valid
     chain: viemChain,
     transport: http()
   })

src/frontend/config.ts

@@ -3,13 +3,12 @@ import { Chain, hardhat, mainnet, polygon } from 'wagmi/chains'
 import { chainMap, parseChainMetadataToViemChain } from '@hyperplay/chains'
 
 let chainsToSupport: Chain[] = []
-const transports = {}
+const transports: { [key: number]: unknown } = {}
 
 for (const chainId in chainMap) {
   const chainMetadata = chainMap[chainId]
   try {
     const chain = parseChainMetadataToViemChain(chainMetadata)
-    // @ts-expect-error: the function is valid, there is just a mismatch in the types due to different versions of viem
     chainsToSupport.push(chain)
     transports[chain.id] = http(chainMetadata.chain.rpc[0])
     // eslint-disable-next-line no-empty

src/frontend/screens/Library/index.tsx

@@ -275,18 +275,19 @@ export default observer(function Library(): JSX.Element {
             />
           )}
 
-          {libraryState.showFavourites && !libraryState.showFavouritesLibrary && (
-            <>
-              <h3 className={styles.libraryHeader}>
-                {t('favourites', 'Favourites')}
-              </h3>
-              <GamesList
-                library={libraryState.favourites}
-                handleGameCardClick={handleModal}
-                isFirstLane
-              />
-            </>
-          )}
+          {libraryState.showFavourites &&
+            !libraryState.showFavouritesLibrary && (
+              <>
+                <h3 className={styles.libraryHeader}>
+                  {t('favourites', 'Favourites')}
+                </h3>
+                <GamesList
+                  library={libraryState.favourites}
+                  handleGameCardClick={handleModal}
+                  isFirstLane
+                />
+              </>
+            )}
 
           {libraryState.refreshing &&
             !libraryState.refreshingInTheBackground && (

src/frontend/state/AchievementState.ts

@@ -77,7 +77,6 @@ class AchievementState {
       {},
       {
         deep: true,
-        proxy: false,
         name: 'AchievementState'
       }
     )

src/frontend/state/OverlayState.ts

@@ -25,7 +25,6 @@ class OverlayState implements OverlayStateInterface {
       {},
       {
         deep: true,
-        proxy: false,
         name: 'OverlayState'
       }
     )