[Tech] Refactor overlay (#923)

* refactor overlay

* fixes

* update overlay

Author: BrettCleary

.github/workflows/submodules-are-merged.yml

@@ -1,3 +0,0 @@
-[submodule "src/backend/hyperplay-overlay"]
-	path = src/backend/hyperplay-overlay
-	url = https://github.com/HyperPlay-Gaming/hyperplay-overlay.git

.gitmodules

@@ -169,7 +169,7 @@
     "@fortawesome/react-fontawesome": "^0.1.18",
     "@hyperplay/check-disk-space": "^3.5.2",
     "@hyperplay/ui": "^1.5.9",
-    "@hyperplay/utils": "^0.0.12",
+    "@hyperplay/utils": "^0.0.14",
     "@mantine/carousel": "^7.5.1",
     "@mantine/core": "^7.5.1",
     "@mantine/dropzone": "^7.5.1",
@@ -364,6 +364,7 @@
     "@hyperplay/extension-importer": "^0.0.4",
     "@hyperplay/extension-provider": "^0.0.6",
     "@hyperplay/mock-backend": "^0.0.1",
+    "@hyperplay/overlay": "^0.0.6",
     "@hyperplay/providers": "^0.0.5",
     "@hyperplay/proxy-server": "^0.0.11"
   },

package.json

@@ -9,7 +9,7 @@ import * as Proxy from './proxy'
 import * as DownloadManager from './downloadmanager'
 import * as Extensions from './extensionImporter'
 import * as Metrics from './metrics'
-import * as Overlay from 'backend/hyperplay-overlay/api'
+import * as Overlay from 'backend/overlay/api'
 import * as Achievements from './questsAchievements'
 
 export default {

src/backend/api/index.ts

@@ -3,9 +3,14 @@ import store from './store'
 import { HyperPlayAPI } from '@hyperplay/utils'
 import './backendEventHandlers'
 import './ipcHandler'
+import { LogPrefix, logError } from 'backend/logger/logger'
 
 export const initExtension = async function (api: HyperPlayAPI) {
-  const extensionImporter = await import('@hyperplay/extension-importer')
-  const isInitialized = store.get('isInitialized', false)
-  extensionImporter.initExtension(api, session.defaultSession, isInitialized)
+  try {
+    const extensionImporter = await import('@hyperplay/extension-importer')
+    const isInitialized = store.get('isInitialized', false)
+    extensionImporter.initExtension(api, session.defaultSession, isInitialized)
+  } catch (err) {
+    logError(`Error initializing extension ${err}`, LogPrefix.HyperPlay)
+  }
 }

src/backend/extension/importer/index.ts

@@ -58,12 +58,12 @@ import { isOnline } from './online_monitor'
 import { showDialogBoxModalAuto } from './dialog/dialog'
 import { legendarySetup } from './storeManagers/legendary/setup'
 import { gameManagerMap } from 'backend/storeManagers'
-import { closeOverlay, openOverlay } from 'backend/hyperplay-overlay'
 import * as VDF from '@node-steam/vdf'
 import { readFileSync } from 'fs'
 import { LegendaryCommand } from './storeManagers/legendary/commands'
 import { commandToArgsArray } from './storeManagers/legendary/library'
 import { searchForExecutableOnPath } from './utils/os/path'
+import { getHpOverlay } from './overlay'
 
 async function prepareLaunch(
   gameSettings: GameSettings,
@@ -652,6 +652,7 @@ async function runWineCommand({
   const wineBin = wineVersion.bin.replaceAll("'", '')
 
   logDebug(['Running Wine command:', commandParts.join(' ')], LogPrefix.Backend)
+  const hpOverlay = await getHpOverlay()
 
   return new Promise<{ stderr: string; stdout: string }>((res) => {
     const wrappers = options?.wrappers || []
@@ -672,7 +673,7 @@ async function runWineCommand({
 
     if (overlayInfo) {
       const { showOverlay, appName, runner } = overlayInfo
-      if (showOverlay) openOverlay(appName, runner)
+      if (showOverlay) hpOverlay?.openOverlay(appName, runner)
     }
 
     if (!logsDisabled) {
@@ -735,18 +736,24 @@ async function runWineCommand({
 
       if (overlayInfo) {
         const { showOverlay } = overlayInfo
-        if (showOverlay) closeOverlay()
+        if (showOverlay) {
+          const hpOverlay = await getHpOverlay()
+          hpOverlay?.closeOverlay()
+        }
       }
 
       res(response)
     })
 
-    child.on('error', (error) => {
+    child.on('error', async (error) => {
       console.log(error)
 
       if (overlayInfo) {
         const { showOverlay } = overlayInfo
-        if (showOverlay) closeOverlay()
+        if (showOverlay) {
+          const hpOverlay = await getHpOverlay()
+          hpOverlay?.closeOverlay()
+        }
       }
     })
   })
@@ -813,6 +820,7 @@ async function callRunner(
   if (currentPromise) {
     return currentPromise
   }
+  const hpOverlay = await getHpOverlay()
 
   let promise = new Promise<ExecResult>((res, rej) => {
     const child = spawn(bin, commandParts, {
@@ -826,7 +834,8 @@ async function callRunner(
       (gameInfo.runner === 'hyperplay' ||
         (gameInfo.runner === 'sideload' && gameInfo.web3?.supported))
 
-    if (shouldOpenOverlay) openOverlay(gameInfo?.app_name, gameInfo.runner)
+    if (shouldOpenOverlay)
+      hpOverlay?.openOverlay(gameInfo?.app_name, gameInfo.runner)
 
     const stdout: string[] = []
     const stderr: string[] = []
@@ -879,7 +888,7 @@ async function callRunner(
     })
 
     child.on('close', (code, signal) => {
-      if (shouldOpenOverlay) closeOverlay()
+      if (shouldOpenOverlay) hpOverlay?.closeOverlay()
       errorHandler({
         error: `${stdout.join().concat(stderr.join())}`,
         logPath: options?.logFile,
@@ -898,7 +907,7 @@ async function callRunner(
     })
 
     child.on('error', (error) => {
-      if (shouldOpenOverlay) closeOverlay()
+      if (shouldOpenOverlay) hpOverlay?.closeOverlay()
       rej(error)
     })
   })

src/backend/hyperplay-overlay

@@ -150,6 +150,7 @@ import { legendarySetup } from 'backend/storeManagers/legendary/setup'
 
 import * as Sentry from '@sentry/electron'
 import { DEV_PORTAL_URL, devSentryDsn, prodSentryDsn } from 'common/constants'
+import { getHpOverlay, initOverlay } from './overlay'
 
 /*
  * INSERT OTHER IPC HANDLERS HERE
@@ -175,11 +176,6 @@ import { metricsAreEnabled, trackEvent } from './metrics/metrics'
 import { hpLibraryStore } from './storeManagers/hyperplay/electronStore'
 import { libraryStore as sideloadLibraryStore } from 'backend/storeManagers/sideload/electronStores'
 import { backendEvents } from 'backend/backend_events'
-import {
-  closeOverlay,
-  overlayIsRunning,
-  toggleOverlay
-} from 'backend/hyperplay-overlay'
 import { PROVIDERS } from 'common/types/proxy-types'
 import 'backend/ipcHandlers/quests'
 import 'backend/ipcHandlers/achievements'
@@ -304,7 +300,7 @@ async function completeHyperPlayQuest() {
 async function initializeWindow(): Promise<BrowserWindow> {
   createNecessaryFolders()
   configStore.set('userHome', userHome)
-  mainWindow = createMainWindow()
+  mainWindow = await createMainWindow()
 
   mainWindow.webContents.on('input-event', (ev, inputEv) => {
     if (eventsToCloseMetaMaskPopupOn.includes(inputEv.type)) {
@@ -415,10 +411,11 @@ if (!gotTheLock) {
   logInfo('HyperPlay is already running, quitting this instance')
   app.quit()
 } else {
-  app.on('second-instance', (event, argv) => {
+  app.on('second-instance', async (event, argv) => {
     // Someone tried to run a second instance, we should focus the overlay or the main window if no overlay is running.
-    if (overlayIsRunning()) {
-      toggleOverlay({ action: 'ON' })
+    const hpOverlay = await getHpOverlay()
+    if (hpOverlay?.overlayIsRunning()) {
+      hpOverlay.toggleOverlay({ action: 'ON' })
     } else {
       const mainWindow = getMainWindow()
       mainWindow?.show()
@@ -457,12 +454,21 @@ if (!gotTheLock) {
     ])
 
     // keyboards with alt and no option key can be used with mac so register both
+    const hpOverlay = await getHpOverlay()
+    const toggle =
+      hpOverlay?.toggleOverlay ??
+      (() =>
+        logInfo(
+          'Cannot toggle overlay without @hyperplay/overlay package',
+          LogPrefix.HyperPlay
+        ))
     const openOverlayAccelerator = 'Alt+X'
-    globalShortcut.register(openOverlayAccelerator, toggleOverlay)
+    globalShortcut.register(openOverlayAccelerator, toggle)
     const openOverlayAcceleratorMac = 'Option+X'
-    globalShortcut.register(openOverlayAcceleratorMac, toggleOverlay)
+    globalShortcut.register(openOverlayAcceleratorMac, toggle)
 
     initExtension(hpApi)
+    initOverlay(hpApi)
 
     initOnlineMonitor()
 
@@ -2011,12 +2017,14 @@ ipcMain.on('openAuthModalIfAppReloads', () => {
   onboardLocalStore.set('openAuthModalIfAppReloads', true)
 })
 
-ipcMain.on('killOverlay', () => {
-  closeOverlay()
+ipcMain.on('killOverlay', async () => {
+  const hpOverlay = await getHpOverlay()
+  hpOverlay?.closeOverlay()
 })
 
-ipcMain.on('toggleOverlay', () => {
-  toggleOverlay()
+ipcMain.on('toggleOverlay', async () => {
+  const hpOverlay = await getHpOverlay()
+  hpOverlay?.toggleOverlay()
 })
 
 ipcMain.handle('getHyperPlayListings', async () => {

src/backend/launcher.ts

@@ -1,7 +1,7 @@
 import { BrowserWindow, screen, app } from 'electron'
 import path from 'path'
 import { configStore } from './constants'
-import { controlWindow } from './hyperplay-overlay/model'
+import { getHpOverlay } from './overlay'
 
 let mainWindow: BrowserWindow | null = null
 
@@ -41,7 +41,7 @@ const hiddenPhrase = 'superhyper123'
 let hiddenPhraseCurrentIndex = 0
 
 // creates the mainWindow based on the configuration
-export const createMainWindow = () => {
+export const createMainWindow = async () => {
   let windowProps: Electron.Rectangle = {
     height: minSupportedResolution.height,
     width: minSupportedResolution.width,
@@ -92,7 +92,8 @@ export const createMainWindow = () => {
     }
   })
 
-  controlWindow(mainWindow.webContents.id, 'mainWindow')
+  const hpOverlay = await getHpOverlay()
+  hpOverlay?.controlWindow(mainWindow.webContents.id, 'mainWindow')
 
   mainWindow.webContents?.on('before-input-event', (ev, input) => {
     if (

src/backend/main.ts

@@ -0,0 +1,105 @@
+import {
+  PROVIDERS,
+  OverlayRenderState,
+  OverlayMode,
+  ToastKey
+} from '@hyperplay/utils'
+import { Toast } from './types'
+import { ipcRenderer } from 'electron'
+
+// TODO share with desktop client
+type WrapRendererCallback<
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  TFunction extends (...args: any) => any
+> = (
+  e: Electron.IpcRendererEvent,
+  ...args: [...Parameters<TFunction>]
+) => ReturnType<TFunction>
+
+function getHandleFunction<
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  Handler extends WrapRendererCallback<(...args: any[]) => void>
+>(topic: string) {
+  return (cb: Handler) => {
+    ipcRenderer.on(topic, cb)
+    return () => {
+      ipcRenderer.removeListener(topic, cb)
+    }
+  }
+}
+
+export const getExtensionId = async () => ipcRenderer.invoke('getExtensionId')
+
+export const handleStateUpdate = {
+  overlay: {
+    renderState: getHandleFunction<
+      WrapRendererCallback<(renderState: OverlayRenderState) => void>
+    >('overlay_state_update_renderState'),
+    isFullscreenOverlay: getHandleFunction<
+      WrapRendererCallback<(isFullscreenOverlay: boolean) => void>
+    >('overlay_state_update_isFullscreenOverlay'),
+    showOverlay: getHandleFunction<
+      WrapRendererCallback<(showOverlay: boolean) => void>
+    >('overlay_state_update_showOverlay'),
+    title: getHandleFunction<
+      WrapRendererCallback<(title: OverlayMode) => void>
+    >('overlay_state_update_title')
+  },
+  extension: {
+    isPopupOpen: getHandleFunction<
+      WrapRendererCallback<(isPopupOpen: boolean) => void>
+    >('extension_state_update_isPopupOpen'),
+    isNotificationOpen: getHandleFunction<
+      WrapRendererCallback<(isNotificationOpen: boolean) => void>
+    >('extension_state_update_isNotificationOpen')
+  },
+  transaction: {
+    isInitialToastShown: getHandleFunction<
+      WrapRendererCallback<(isInitialToastShown: boolean) => void>
+    >('transaction_state_update_isInitialToastShown'),
+    latestToast: getHandleFunction<
+      WrapRendererCallback<(latestToast: Toast) => void>
+    >('transaction_state_update_latestToast')
+  },
+  walletState: {
+    address: getHandleFunction<WrapRendererCallback<(address: string) => void>>(
+      'wallet_state_update_address'
+    ),
+    isConnected: getHandleFunction<
+      WrapRendererCallback<(isConnected: boolean) => void>
+    >('wallet_state_update_isConnected'),
+    provider: getHandleFunction<
+      WrapRendererCallback<(provider: PROVIDERS) => void>
+    >('wallet_state_update_provider'),
+    otp: getHandleFunction<WrapRendererCallback<(otp: string) => void>>(
+      'wallet_state_update_otp'
+    )
+  }
+}
+
+export const initialState = {
+  walletState: {
+    address: async () => ipcRenderer.invoke('get_wallet_state_address'),
+    isConnected: async () => ipcRenderer.invoke('get_wallet_state_isConnected'),
+    provider: async () => ipcRenderer.invoke('get_wallet_state_provider'),
+    otp: async () => ipcRenderer.invoke('get_wallet_state_otp')
+  },
+  extensionState: {
+    isPopupOpen: async () =>
+      ipcRenderer.invoke('get_extension_state_isPopupOpen')
+  }
+}
+export const toggleIsPopupOpen = () => ipcRenderer.send('toggleIsPopupOpen')
+
+export const showPopup = () => ipcRenderer.send('showPopup')
+
+export const overlayReady = () => ipcRenderer.send('overlayReady')
+
+export const toastCloseOnClick = (key: ToastKey) =>
+  ipcRenderer.send('toastCloseOnClick', key)
+
+export const lockPopup = (lock: boolean) => ipcRenderer.send('lockPopup', lock)
+
+export const killOverlay = () => ipcRenderer.send('killOverlay')
+
+export const toggleOverlay = () => ipcRenderer.send('toggleOverlay')