[Tech] Add import wallet feature & set MetaMask dark mode as default (#81)

* Add import wallet feature

* minor refactor

* resolved database concurrency errors

* added restartApp, refactored/modified ExtensionHandler

* cleanup of Screens/Onboarding/index.tsx

* Fixed app closing to tray after importing wallet

* Fixed MM not connecting within first 2 seconds of app launch

* Added chrome, edge & vivaldi logo

* updated submodule

* chore: corrected merge

* fix: fixed ExtensionHandler logic

* [Feature] Change Restart App on Import to Reload (#125)

* import err handling, fix skip, change restart to reload

* add create new mm wallet

* improve error handling

* point to import wallet ext helper branch

---------

Co-authored-by: Brett <27568879+BrettCleary@users.noreply.github.com>

Author: hellowodl

package.json

@@ -145,6 +145,7 @@
     "axios": "^0.26.1",
     "bn.js": "^5.2.1",
     "check-disk-space": "^3.3.1",
+    "classic-level": "^1.2.0",
     "classnames": "^2.3.1",
     "crc": "^4.1.1",
     "discord-rich-presence-typescript": "^0.0.8",

src/backend/constants.ts

@@ -185,6 +185,7 @@ export {
   configStore,
   configPath,
   appConfigFolder,
+  configFolder,
   gamesConfigPath,
   githubURL,
   iconsFolder,

src/backend/hyperplay-extension-helper

@@ -1,3 +1,4 @@
+import { setExtensionMetadata } from 'backend/hyperplay-extension-helper/ipcHandlers/index'
 import { initImagesCache } from './images_cache'
 import { downloadAntiCheatData } from './anticheat/utils'
 import {
@@ -145,10 +146,7 @@ import {
 import { callAbortController } from './utils/aborthandler/aborthandler'
 import { getDefaultSavePath } from './save_sync'
 import si from 'systeminformation'
-import {
-  initExtensionIpcHandlerWindow,
-  initExtension
-} from './hyperplay-extension-helper/ipcHandlers'
+import { initExtensionIpcHandlerWindow } from './hyperplay-extension-helper/ipcHandlers'
 import { initTrayIcon } from './tray_icon/tray_icon'
 
 app.commandLine.appendSwitch('remote-debugging-port', '9222')
@@ -195,8 +193,6 @@ async function createWindow(): Promise<BrowserWindow> {
     }
   }
 
-  await initExtension()
-
   // Create the browser window.
   mainWindow = new BrowserWindow({
     ...windowProps,
@@ -266,6 +262,12 @@ async function createWindow(): Promise<BrowserWindow> {
   //   detectVCRedist(mainWindow)
   // }
 
+  loadMainWindowURL()
+
+  return mainWindow
+}
+
+const loadMainWindowURL = function () {
   if (!app.isPackaged) {
     // if (!process.env.HEROIC_NO_REACT_DEVTOOLS) {
     //   import('electron-devtools-installer').then((devtools) => {
@@ -288,7 +290,6 @@ async function createWindow(): Promise<BrowserWindow> {
       autoUpdater.checkForUpdates()
     }
   }
-  return mainWindow
 }
 
 // This method will be called when Electron has finished
@@ -325,6 +326,8 @@ if (!gotTheLock) {
     handleProtocol(mainWindow, argv)
   })
   app.whenReady().then(async () => {
+    setExtensionMetadata()
+
     initOnlineMonitor()
 
     getSystemInfo().then((systemInfo) =>
@@ -1609,3 +1612,7 @@ ProviderHelper.passEventCallbacks(
 )
 
 ipcMain.on('openHyperplaySite', async () => openUrlOrFile(hyperplaySite))
+
+ipcMain.on('reloadApp', async () => {
+  loadMainWindowURL()
+})

src/backend/main.ts

@@ -1,3 +1,5 @@
+import { ExtensionStore } from './../../backend/hyperplay-extension-helper/store/index'
+import { MetaMaskImportOptions } from './../../backend/hyperplay-extension-helper/ipcHandlers/index'
 import { EventEmitter } from 'node:events'
 import { IpcMainEvent, OpenDialogOptions } from 'electron'
 import { HowLongToBeatEntry } from 'howlongtobeat'
@@ -50,14 +52,16 @@ interface HyperPlaySyncIPCFunctions {
   /* eslint-disable-next-line  @typescript-eslint/no-explicit-any */
   errorExtensionRequest: (requestId: number, error: any) => void
   chromeSetBadgeText: (text: string) => void
+  loadingScreenReady: () => void
+  reloadApp: () => void
+  createNewMetaMaskWallet: () => void
 }
 
 interface SyncIPCFunctions extends HyperPlaySyncIPCFunctions {
   setZoomFactor: (zoomFactor: string) => void
   changeLanguage: (language: string) => void
   notify: (args: { title: string; body: string }) => void
   frontendReady: () => void
-  loadingScreenReady: () => void
   lock: () => void
   unlock: () => void
   quit: () => void
@@ -115,6 +119,11 @@ interface HyperPlayAsyncIPCFunctions {
   chromeTabsCreate: (
     options: chrome.tabs.CreateProperties
   ) => Promise<chrome.tabs.Tab>
+  importMetaMask: (dbPath: string | null | undefined) => Promise<boolean>
+  getMetaMaskImportOptions: (
+    configDbPath?: string
+  ) => Promise<MetaMaskImportOptions | null>
+  getExtensionMetadata: () => Promise<ExtensionStore['extensionMetadata']>
   getTabUrl: () => Promise<string>
   getExtensionId: () => Promise<string>
 }

src/common/typedefs/ipcBridge.d.ts

@@ -57,11 +57,25 @@ const ExtensionHandler = function () {
   useEffect(() => {
     /* eslint-disable-next-line @typescript-eslint/no-empty-function */
     let rmListeners = () => {}
+
+    const bindListeners = (): boolean => {
+      if (typeof window.ethereum !== 'undefined') {
+        rmListeners = bindEthereumListeners()
+        return true
+      }
+      return false
+    }
+
+    if (bindListeners()) {
+      return () => {
+        rmListeners()
+      }
+    }
+
     const interval = setInterval(() => {
       console.log('checking for metamask extension...')
       if (typeof window.ethereum !== 'undefined') {
-        console.log('metamask extension found!')
-        rmListeners = bindEthereumListeners()
+        bindListeners()
         clearInterval(interval)
       }
     }, 2000)