Choose summon keybinding (#1494)

Co-authored-by: goosewobbler <goosewobbler@pm.me>
Co-authored-by: goosewobbler <goosewobbler@protonmail.com>

app/dash/Main/style/index.styl

@@ -247,6 +247,13 @@
     border 1px solid var(--outerspace05)
     color var(--outerspace)
     height 30px
+    cursor pointer
+
+  .keyCommand:hover
+    background var(--ghostD)
+
+  .keyCommandCancel
+    margin-left 130px
 
   .nodeProviderStatus
     display flex

app/dash/Settings/index.js

@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import Restore from 'react-restore'
 
 import link from '../../../resources/link'
 import Dropdown from '../../../resources/Components/Dropdown'
-import { getSummonShortcut } from '../../../resources/app'
+import KeyboardShortcutConfigurator from '../../../resources/Components/KeyboardShortcutConfigurator'
 
 class Settings extends React.Component {
   constructor(props, context) {
@@ -30,7 +30,9 @@ class Settings extends React.Component {
   }
 
   render() {
-    const { modifierKey, summonKey } = getSummonShortcut(this.store('platform'))
+    const summonShortcut = this.store('main.shortcuts.summon')
+    const platform = this.store('platform')
+
     return (
       <div className={'localSettings cardShow'}>
         <div className='localSettingsWrap'>
@@ -39,26 +41,27 @@ class Settings extends React.Component {
               <div className='signerPermissionSetting'>Summon Shortcut</div>
               <div
                 className={
-                  this.store('main.shortcuts.altSlash')
+                  summonShortcut.enabled
                     ? 'signerPermissionToggle signerPermissionToggleOn'
                     : 'signerPermissionToggle'
                 }
-                onClick={(_) =>
-                  link.send('tray:action', 'setAltSpace', !this.store('main.shortcuts.altSlash'))
-                }
+                onClick={() => {
+                  link.send('tray:action', 'setShortcut', 'summon', {
+                    ...summonShortcut,
+                    enabled: !summonShortcut.enabled
+                  })
+                }}
               >
                 <div className='signerPermissionToggleSwitch' />
               </div>
             </div>
             <div className='signerPermissionDetails'>
-              <span>
-                Summon Frame by pressing{' '}
-                <span className='keyCommand'>
-                  {modifierKey}
-                  <span style={{ padding: '0px 3px' }}>+</span>
-                  {summonKey}
-                </span>
-              </span>
+              <KeyboardShortcutConfigurator
+                actionText='Summon Frame'
+                shortcut={summonShortcut}
+                shortcutName='summon'
+                platform={platform}
+              />
             </div>
           </div>
           <div className='signerPermission localSetting' style={{ zIndex: 213 }}>

app/onboard/App/Slides/Access/index.jsx

@@ -4,10 +4,10 @@ import { Slide, SlideBody, SlideItem, Shortcut } from '../../styled'
 
 import link from '../../../../../resources/link'
 
-import { getSummonShortcut } from '../../../../../resources/app'
+import { getDisplayShortcut } from '../../../../../resources/app'
 
 const Access = ({ setTitle, setProceed, platform }) => {
-  const { modifierKey, summonKey } = getSummonShortcut(platform)
+  const { modifierKey, summonKey } = getDisplayShortcut(platform, store('main.shortcuts.summon'))
   const keyboardShortcut = `${modifierKey} + ${summonKey}`
   const [shortcutActivated, setShortcutActivated] = useState(false)
   const [trayOpen, setTrayOpen] = useState(store('tray.open'))

main/store/actions/index.js

@@ -221,8 +221,13 @@ module.exports = {
   toggleSignerCompatibilityWarning: (u) => {
     u('main.mute.signerCompatibilityWarning', (v) => !v)
   },
-  setAltSpace: (u, v) => {
-    u('main.shortcuts.altSlash', () => v)
+  setShortcut: (u, name, shortcut) => {
+    u('main.shortcuts', name, (existingShortcut = {}) => ({
+      modifierKeys: shortcut.modifierKeys || existingShortcut.modifierKeys,
+      shortcutKey: shortcut.shortcutKey || existingShortcut.shortcutKey,
+      configuring: shortcut.configuring ?? existingShortcut.configuring,
+      enabled: shortcut.enabled ?? existingShortcut.enabled
+    }))
   },
   setAutohide: (u, v) => {
     u('main.autohide', () => v)

main/store/migrate/index.ts

@@ -3,10 +3,11 @@ import log from 'electron-log'
 import legacyMigrations from './migrations/legacy'
 import migration35 from './migrations/35'
 import migration36 from './migrations/36'
+import migration37 from './migrations/37'
 
 import type { Migration } from '../state'
 
-const migrations: Migration[] = [...legacyMigrations, migration35, migration36].sort(
+const migrations: Migration[] = [...legacyMigrations, migration35, migration36, migration37].sort(
   (m1, m2) => m1.version - m2.version
 )
 

main/store/migrate/migrations/35/schema.ts

@@ -7,6 +7,10 @@ const v35MuteSchema = z
   .passthrough()
   .default({})
 
+export const v35ShortcutsSchema = z.object({
+  altSlash: z.boolean().default(false)
+})
+
 const v35ConnectionSchema = z
   .object({
     current: z.enum(['local', 'custom', 'infura', 'alchemy', 'poa']),
@@ -33,7 +37,8 @@ export const v35ChainsSchema = z.object({
 export const v35MainSchema = z
   .object({
     networks: v35ChainsSchema,
-    mute: v35MuteSchema
+    mute: v35MuteSchema,
+    shortcuts: v35ShortcutsSchema
   })
   .passthrough()
 

main/store/migrate/migrations/37/index.ts

@@ -0,0 +1,38 @@
+import log from 'electron-log'
+
+import { v35StateSchema } from '../35/schema'
+
+import type { v37State } from './schema'
+
+const migrate = (initial: unknown) => {
+  try {
+    const state = v35StateSchema.parse(initial)
+    const summonShortcutEnabled = state.main.shortcuts.altSlash
+
+    const migratedState: v37State = {
+      ...state,
+      main: {
+        ...state.main,
+        shortcuts: {
+          summon: {
+            modifierKeys: ['Alt'],
+            shortcutKey: 'Slash',
+            enabled: summonShortcutEnabled,
+            configuring: false
+          }
+        }
+      }
+    }
+
+    return migratedState
+  } catch (e) {
+    log.error('Migration 37: could not parse state', e)
+  }
+
+  return initial
+}
+
+export default {
+  version: 37,
+  migrate
+}

main/store/migrate/migrations/37/schema.ts

@@ -0,0 +1,18 @@
+import { z } from 'zod'
+import { v35MainSchema, v35StateSchema } from '../35/schema'
+
+const v37ShortcutsSchema = z.object({
+  summon: z.object({
+    modifierKeys: z.array(z.enum(['Alt', 'Ctrl', 'Meta', 'Cmd'])),
+    shortcutKey: z.string(),
+    enabled: z.boolean(),
+    configuring: z.boolean()
+  })
+})
+
+const v37MainSchema = v35MainSchema.merge(z.object({ shortcuts: v37ShortcutsSchema }))
+const mainUpdates = z.object({ main: v37MainSchema }).passthrough()
+
+export const v37StateSchema = v35StateSchema.merge(mainUpdates).passthrough()
+
+export type v37State = z.infer<typeof v37StateSchema>

main/store/state/index.ts

@@ -94,7 +94,7 @@ type M = Main & {
 }
 
 const mainState: M = {
-  _version: main('_version', 36),
+  _version: main('_version', 37),
   instanceId: main('instanceId', generateUuid()),
   colorway: main('colorway', 'dark'),
   colorwayPrimary: {
@@ -119,7 +119,12 @@ const mainState: M = {
     signerCompatibilityWarning: main('mute.signerCompatibilityWarning', false)
   },
   shortcuts: {
-    altSlash: main('shortcuts.altSlash', true)
+    summon: main('shortcuts.summon', {
+      modifierKeys: ['Alt'],
+      shortcutKey: 'Slash',
+      enabled: true,
+      configuring: false
+    })
   },
   // showUSDValue: main('showUSDValue', true),
   launch: main('launch', false),

main/store/state/types/main.ts

@@ -7,6 +7,11 @@ import { ColorwayPrimarySchema } from './colors'
 import { DappSchema } from './dapp'
 import { OriginSchema } from './origin'
 import { PermissionSchema } from './permission'
+import { ShortcutSchema } from './shortcuts'
+
+const ShortcutsSchema = z.object({
+  summon: ShortcutSchema
+})
 
 const UpdaterPreferencesSchema = z.object({
   dontRemind: z.array(z.string())
@@ -61,6 +66,7 @@ export const MainSchema = z.object({
   mute: z.record(notificationTypes, z.boolean()),
   colorway: z.enum(['light', 'dark']),
   colorwayPrimary: ColorwayPrimarySchema,
+  shortcuts: ShortcutsSchema,
   updater: UpdaterPreferencesSchema,
   ...PreferencesSchema
 })

main/store/state/types/shortcuts.ts

@@ -0,0 +1,91 @@
+import { z } from 'zod'
+
+const supportedModifierKey = z.enum(['Alt', 'Control', 'Meta', 'Super', 'CommandOrCtrl'])
+
+const supportedShortcutKey = z.enum([
+  'Comma',
+  'Period',
+  'Forwardslash',
+  'Slash',
+  'Tab',
+  'Space',
+  'Enter',
+  'Escape',
+  'ArrowUp',
+  'ArrowDown',
+  'ArrowLeft',
+  'ArrowRight',
+  'F1',
+  'F2',
+  'F3',
+  'F4',
+  'F5',
+  'F6',
+  'F7',
+  'F8',
+  'F9',
+  'F10',
+  'F11',
+  'Digit9',
+  'Digit8',
+  'Digit7',
+  'Digit6',
+  'Digit5',
+  'Digit4',
+  'Digit3',
+  'Digit2',
+  'Digit1',
+  'Digit0',
+  'KeyA',
+  'KeyB',
+  'KeyC',
+  'KeyD',
+  'KeyE',
+  'KeyF',
+  'KeyG',
+  'KeyH',
+  'KeyI',
+  'KeyJ',
+  'KeyK',
+  'KeyL',
+  'KeyM',
+  'KeyN',
+  'KeyO',
+  'KeyP',
+  'KeyQ',
+  'KeyR',
+  'KeyS',
+  'KeyT',
+  'KeyU',
+  'KeyV',
+  'KeyW',
+  'KeyX',
+  'KeyY',
+  'KeyZ',
+  'NumpadDivide',
+  'NumpadMultiply',
+  'NumpadSubtract',
+  'NumpadAdd',
+  'NumpadDecimal',
+  'Numpad9',
+  'Numpad8',
+  'Numpad7',
+  'Numpad6',
+  'Numpad5',
+  'Numpad4',
+  'Numpad3',
+  'Numpad2',
+  'Numpad1',
+  'Numpad0'
+])
+
+export const ShortcutSchema = z.object({
+  modifierKeys: z.array(supportedModifierKey).default([]),
+  shortcutKey: supportedShortcutKey,
+  enabled: z.boolean().default(true),
+  configuring: z.boolean().default(false)
+})
+
+export type ModifierKey = z.infer<typeof supportedModifierKey>
+export type ShortcutKey = z.infer<typeof supportedShortcutKey>
+export type Shortcut = z.infer<typeof ShortcutSchema>

main/windows/index.ts

@@ -16,6 +16,7 @@ import store from '../store'
 import FrameManager from './frames'
 import { createWindow } from './window'
 import { SystemTray, SystemTrayEventHandlers } from './systemTray'
+import { getAcceleratorFromShortcut } from '../../resources/app'
 
 type Windows = { [key: string]: BrowserWindow }
 
@@ -39,6 +40,7 @@ let onboard: Onboard
 let notify: Notify
 let mouseTimeout: NodeJS.Timeout
 let glide = false
+let summonShortcutAccelerator = 'Alt+/'
 
 const app = {
   hide: () => {
@@ -666,20 +668,34 @@ const init = () => {
 
   store.observer(() => broadcast('permissions', JSON.stringify(store('permissions'))))
   store.observer(() => {
-    const displaySummonShortcut = store('main.shortcuts.altSlash')
-    if (displaySummonShortcut) {
-      globalShortcut.unregister('Alt+/')
-      globalShortcut.register('Alt+/', () => {
-        app.toggle()
-        if (store('windows.onboard.showing')) {
-          send('onboard', 'main:flex', 'shortcutActivated')
-        }
-      })
-    } else {
-      globalShortcut.unregister('Alt+/')
+    const summonShortcut = store('main.shortcuts.summon')
+    const accelerator = getAcceleratorFromShortcut(summonShortcut)
+    try {
+      globalShortcut.unregister(accelerator)
+      if (summonShortcutAccelerator) {
+        globalShortcut.unregister(summonShortcutAccelerator)
+      }
+      if (summonShortcut.enabled && !summonShortcut.configuring) {
+        globalShortcut.register(accelerator, () => {
+          app.toggle()
+          if (store('windows.onboard.showing')) {
+            send('onboard', 'main:flex', 'shortcutActivated')
+          }
+        })
+        summonShortcutAccelerator = accelerator
+      }
+    } catch (e) {
+      const summonShortcutStr = [...summonShortcut.modifierKeys, summonShortcut.shortcutKey].join('+')
+      log.error(
+        new Error(`Could not set accelerator "${accelerator}" for summon shortcut: ${summonShortcutStr}`)
+      )
     }
+
     if (tray?.isReady()) {
-      systemTray.setContextMenu(tray.isVisible() ? 'hide' : 'show', { displaySummonShortcut })
+      systemTray.setContextMenu(tray.isVisible() ? 'hide' : 'show', {
+        displaySummonShortcut: summonShortcut.enabled,
+        accelerator
+      })
     }
   })
 }