From 3c8d03fac5e00e1a771b86b377ec577126f80479 Mon Sep 17 00:00:00 2001 From: goosewobbler Date: Fri, 20 Jan 2023 14:08:04 +0000 Subject: [PATCH 1/4] show correct shortcut in settings --- app/dash/Settings/index.js | 278 ++++++------------------------------- 1 file changed, 43 insertions(+), 235 deletions(-) diff --git a/app/dash/Settings/index.js b/app/dash/Settings/index.js index 3b8ca31f8..b24d82d05 100644 --- a/app/dash/Settings/index.js +++ b/app/dash/Settings/index.js @@ -1,103 +1,51 @@ -import React from 'react' +import React, { useState, useEffect } from 'react' import Restore from 'react-restore' -import link from '../../../resources/link' +import link from '../../../resources/link' import Dropdown from '../../../resources/Components/Dropdown' -import { okPort, okProtocol } from '../../../resources/connections' + +const SummonKeySetting = ({ value, platform }) => { + const [summonKey, setSummonKey] = useState('/') + + useEffect(() => { + ;(async () => { + const keyboardLayoutMap = await navigator.keyboard.getLayoutMap() + setSummonKey(keyboardLayoutMap.get('Slash')) + })() + }, []) + + const modifierKey = platform === 'darwin' ? 'Option' : 'Alt' + const keyboardShortcut = `${modifierKey} + ${summonKey}` + return ( +
+
+
Summon Shortcut
+
link.send('tray:action', 'setAltSpace', !value)} + > +
+
+
+
+ + Summon Frame by pressing {keyboardShortcut} + +
+
+ ) +} class Settings extends React.Component { constructor(props, context) { super(props, context) - // this.customMessage = 'Custom Endpoint' - // this.network = context.store('main.currentNetwork.id') - // this.networkType = context.store('main.currentNetwork.type') - // const primaryCustom = context.store('main.networks', this.networkType, this.network, 'connection.primary.custom') || this.customMessage - // const secondaryCustom = context.store('main.networks', this.networkType, this.network, 'connection.secondary.custom') || this.customMessage const latticeEndpoint = context.store('main.latticeSettings.endpointCustom') const latticeEndpointMode = context.store('main.latticeSettings.endpointMode') this.state = { - localShake: {}, latticeEndpoint, latticeEndpointMode, - resetConfirm: false, - expandNetwork: false + resetConfirm: false } - // context.store.observer(() => { - // const { type, id } = context.store('main.currentNetwork') - // if (this.network !== id || this.networkType !== type) { - // this.networkType = type - // this.network = id - // const primaryCustom = context.store('main.networks', type, id, 'connection.primary.custom') || this.customMessage - // const secondaryCustom = context.store('main.networks', type, id, 'connection.secondary.custom') || this.customMessage - // this.setState({ primaryCustom, secondaryCustom }) - // } - // }) - } - - // appInfo () { - // return ( - //
- //
{'v' + require('../../../package.json').version}
- //
- // {this.state.resetConfirm ? ( - // - // Are you sure you want to reset everything? link.send('tray:resetAllSettings')}>Yes / this.setState({ resetConfirm: false })}>No - // - // ) : ( - // this.setState({ resetConfirm: true })}>Reset All Settings & Data - // )} - //
- //
- // ) - // } - - // - // latticeFocus () { - // if (this.state.latticeEndpoint === this.customMessage) this.setState({ secondaryCustom: '' }) - // } - // - // latticeBlur () { - // if (this.state.secondaryCustom === '') this.setState({ secondaryCustom: this.customMessage }) - // } - - // customSecondaryFocus () { - // if (this.state.secondaryCustom === this.customMessage) this.setState({ secondaryCustom: '' }) - // } - - // customSecondaryBlur () { - // if (this.state.secondaryCustom === '') this.setState({ secondaryCustom: this.customMessage }) - // } - - customPrimaryFocus() { - if (this.state.primaryCustom === this.customMessage) this.setState({ primaryCustom: '' }) - } - - customPrimaryBlur() { - if (this.state.primaryCustom === '') this.setState({ primaryCustom: this.customMessage }) - } - - inputPrimaryCustom(e) { - e.preventDefault() - clearTimeout(this.customPrimaryInputTimeout) - const value = e.target.value.replace(/\s+/g, '') - this.setState({ primaryCustom: value }) - const { type, id } = this.store('main.currentNetwork') - this.customPrimaryInputTimeout = setTimeout( - () => link.send('tray:action', 'setPrimaryCustom', type, id, this.state.primaryCustom), - 1000 - ) - } - - inputSecondaryCustom(e) { - e.preventDefault() - clearTimeout(this.customSecondaryInputTimeout) - const value = e.target.value.replace(/\s+/g, '') - this.setState({ secondaryCustom: value }) - const { type, id } = this.store('main.currentNetwork') - this.customSecondaryInputTimeout = setTimeout( - () => link.send('tray:action', 'setSecondaryCustom', type, id, this.state.secondaryCustom), - 1000 - ) } inputLatticeEndpoint(e) { @@ -112,141 +60,11 @@ class Settings extends React.Component { ) } - localShake(key) { - const localShake = Object.assign({}, this.state.localShake) - localShake[key] = true - this.setState({ localShake }) - setTimeout(() => { - const localShake = Object.assign({}, this.state.localShake) - localShake[key] = false - this.setState({ localShake }) - }, 1010) - } - - status(layer) { - const { type, id } = this.store('main.currentNetwork') - const connection = this.store('main.networks', type, id, 'connection', layer) - let status = connection.status - const current = connection.current - - if (current === 'custom') { - if ( - layer === 'primary' && - this.state.primaryCustom !== '' && - this.state.primaryCustom !== this.customMessage - ) { - if (!okProtocol(this.state.primaryCustom)) status = 'invalid target' - else if (!okPort(this.state.primaryCustom)) status = 'invalid port' - } - - if ( - layer === 'secondary' && - this.state.secondaryCustom !== '' && - this.state.secondaryCustom !== this.customMessage - ) { - if (!okProtocol(this.state.secondaryCustom)) status = 'invalid target' - else if (!okPort(this.state.secondaryCustom)) status = 'invalid port' - } - } - if (status === 'connected' && !connection.network) status = 'loading' - return ( -
- {this.indicator(status)} -
{status}
-
- ) - } - - discord() { - return ( -
link.send('tray:openExternal', 'https://discord.gg/UH7NGqY')} - > -
Need help?
-
Join our Discord!
-
- ) - } - - quit() { - return ( -
-
link.send('tray:quit')}> - Quit -
-
- ) - } - - indicator(status) { - if (status === 'connected') { - return ( -
-
-
- ) - } else if (status === 'loading' || status === 'syncing' || status === 'pending' || status === 'standby') { - return ( -
-
-
- ) - } else { - return ( -
-
-
- ) - } - } - - selectNetwork(network) { - const [type, id] = network.split(':') - if (network.type !== type || network.id !== id) link.send('tray:action', 'selectNetwork', type, id) - } - - expandNetwork(e, expand) { - e.stopPropagation() - this.setState({ expandNetwork: expand !== undefined ? expand : !this.state.expandNetwork }) - } - render() { return (
- {/* */} - {/*
-
link.send('tray:openExternal', 'https://feedback.frame.sh') }> - Request a Feature -
-
*/} -
-
-
Summon Shortcut
-
- link.send('tray:action', 'setAltSpace', !this.store('main.shortcuts.altSlash')) - } - > -
-
-
-
- - Summon Frame by pressing{' '} - - {this.store('platform') === 'darwin' ? 'Option' : 'Alt'} - +/ - - -
-
+
Auto-hide
@@ -256,7 +74,7 @@ class Settings extends React.Component { ? 'signerPermissionToggle signerPermissionToggleOn' : 'signerPermissionToggle' } - onClick={(_) => link.send('tray:action', 'setAutohide', !this.store('main.autohide'))} + onClick={() => link.send('tray:action', 'setAutohide', !this.store('main.autohide'))} >
@@ -274,7 +92,7 @@ class Settings extends React.Component { ? 'signerPermissionToggle signerPermissionToggleOn' : 'signerPermissionToggle' } - onClick={(_) => link.send('tray:action', 'toggleLaunch')} + onClick={() => link.send('tray:action', 'toggleLaunch')} >
@@ -290,24 +108,14 @@ class Settings extends React.Component { ? 'signerPermissionToggle signerPermissionToggleOn' : 'signerPermissionToggle' } - onClick={(_) => link.send('tray:action', 'toggleReveal')} + onClick={() => link.send('tray:action', 'toggleReveal')} >
{"Mouse to display's right edge to summon Frame"}
- {/*
-
-
Show USD Value
-
link.send('tray:action', 'toggleUSDValue')}> -
-
-
-
- Show USD value of Ether and token balances -
-
*/} + {this.store('platform') === 'darwin' ? (
@@ -318,7 +126,7 @@ class Settings extends React.Component { ? 'signerPermissionToggle signerPermissionToggleOn' : 'signerPermissionToggle' } - onClick={(_) => + onClick={() => link.send('tray:action', 'setMenubarGasPrice', !this.store('main.menubarGasPrice')) } > @@ -338,7 +146,7 @@ class Settings extends React.Component { ? 'signerPermissionToggle signerPermissionToggleOn' : 'signerPermissionToggle' } - onClick={(_) => + onClick={() => link.send('tray:action', 'setErrorReporting', !this.store('main.privacy.errorReporting')) } > @@ -359,7 +167,7 @@ class Settings extends React.Component { ? 'signerPermissionToggle signerPermissionToggleOn' : 'signerPermissionToggle' } - onClick={(_) => { + onClick={() => { link.send('tray:action', 'toggleNonceAdjust') if (!this.store('main.nonceAdjust')) { link.send('tray:action', 'navDash', { From 93c5e04b3a049f0ed8e4449ea390022331288935 Mon Sep 17 00:00:00 2001 From: goosewobbler Date: Fri, 20 Jan 2023 14:08:16 +0000 Subject: [PATCH 2/4] show correct shortcut in onboard --- app/onboard/App/Slides/Access/index.jsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/app/onboard/App/Slides/Access/index.jsx b/app/onboard/App/Slides/Access/index.jsx index caa11efc9..fd6d08179 100644 --- a/app/onboard/App/Slides/Access/index.jsx +++ b/app/onboard/App/Slides/Access/index.jsx @@ -5,9 +5,19 @@ import { Slide, SlideBody, SlideItem, Shortcut } from '../../styled' import link from '../../../../../resources/link' const Access = ({ setTitle, setProceed, platform }) => { - const keyboardShortcut = platform === 'darwin' ? 'Option + /' : 'Alt + /' const [shortcutActivated, setShortcutActivated] = useState(false) const [trayOpen, setTrayOpen] = useState(store('tray.open')) + const [summonKey, setSummonKey] = useState('/') + + useEffect(() => { + ;(async () => { + const keyboardLayoutMap = await navigator.keyboard.getLayoutMap() + setSummonKey(keyboardLayoutMap.get('Slash')) + })() + }, []) + + const modifierKey = platform === 'darwin' ? 'Option' : 'Alt' + const keyboardShortcut = `${modifierKey} + ${summonKey}` useEffect(() => { const handler = (event) => { From cdf48e4e37042dadd02daab1e875601473c1647d Mon Sep 17 00:00:00 2001 From: Jordan Muir Date: Sun, 12 Feb 2023 14:34:39 -0500 Subject: [PATCH 3/4] don't use state or effect --- app/dash/Settings/index.js | 62 ++++++++++++------------- app/onboard/App/Slides/Access/index.jsx | 15 ++---- resources/app/index.js | 10 ++++ 3 files changed, 43 insertions(+), 44 deletions(-) create mode 100644 resources/app/index.js diff --git a/app/dash/Settings/index.js b/app/dash/Settings/index.js index b24d82d05..f6e872df5 100644 --- a/app/dash/Settings/index.js +++ b/app/dash/Settings/index.js @@ -3,38 +3,7 @@ import Restore from 'react-restore' import link from '../../../resources/link' import Dropdown from '../../../resources/Components/Dropdown' - -const SummonKeySetting = ({ value, platform }) => { - const [summonKey, setSummonKey] = useState('/') - - useEffect(() => { - ;(async () => { - const keyboardLayoutMap = await navigator.keyboard.getLayoutMap() - setSummonKey(keyboardLayoutMap.get('Slash')) - })() - }, []) - - const modifierKey = platform === 'darwin' ? 'Option' : 'Alt' - const keyboardShortcut = `${modifierKey} + ${summonKey}` - return ( -
-
-
Summon Shortcut
-
link.send('tray:action', 'setAltSpace', !value)} - > -
-
-
-
- - Summon Frame by pressing {keyboardShortcut} - -
-
- ) -} +import { getSummonShortcut } from '../../../resources/app' class Settings extends React.Component { constructor(props, context) { @@ -61,10 +30,37 @@ class Settings extends React.Component { } render() { + const { modifierKey, summonKey } = getSummonShortcut(this.store('platform')) return (
- +
+
+
Summon Shortcut
+
+ link.send('tray:action', 'setAltSpace', !this.store('main.shortcuts.altSlash')) + } + > +
+
+
+
+ + Summon Frame by pressing{' '} + + {modifierKey} + + + {summonKey} + + +
+
Auto-hide
diff --git a/app/onboard/App/Slides/Access/index.jsx b/app/onboard/App/Slides/Access/index.jsx index fd6d08179..c56a7f97e 100644 --- a/app/onboard/App/Slides/Access/index.jsx +++ b/app/onboard/App/Slides/Access/index.jsx @@ -4,20 +4,13 @@ import { Slide, SlideBody, SlideItem, Shortcut } from '../../styled' import link from '../../../../../resources/link' +import { getSummonShortcut } from '../../../../../resources/app' + const Access = ({ setTitle, setProceed, platform }) => { + const { modifierKey, summonKey } = getSummonShortcut(platform) + const keyboardShortcut = `${modifierKey} + ${summonKey}` const [shortcutActivated, setShortcutActivated] = useState(false) const [trayOpen, setTrayOpen] = useState(store('tray.open')) - const [summonKey, setSummonKey] = useState('/') - - useEffect(() => { - ;(async () => { - const keyboardLayoutMap = await navigator.keyboard.getLayoutMap() - setSummonKey(keyboardLayoutMap.get('Slash')) - })() - }, []) - - const modifierKey = platform === 'darwin' ? 'Option' : 'Alt' - const keyboardShortcut = `${modifierKey} + ${summonKey}` useEffect(() => { const handler = (event) => { diff --git a/resources/app/index.js b/resources/app/index.js new file mode 100644 index 000000000..c8cdadc58 --- /dev/null +++ b/resources/app/index.js @@ -0,0 +1,10 @@ +let keyboardLayout +navigator.keyboard.getLayoutMap().then((_keyboardLayout) => { + keyboardLayout = _keyboardLayout +}) + +export const getSummonShortcut = (platform) => { + const modifierKey = platform === 'darwin' ? 'Option' : 'Alt' + const summonKey = keyboardLayout ? keyboardLayout.get('Slash') : '/' + return { modifierKey, summonKey } +} From 6ed07ca5c72143fc29ec238b0a6547ff82276a39 Mon Sep 17 00:00:00 2001 From: Jordan Muir Date: Sun, 12 Feb 2023 14:47:13 -0500 Subject: [PATCH 4/4] cache get --- resources/app/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/resources/app/index.js b/resources/app/index.js index c8cdadc58..045d8ef8f 100644 --- a/resources/app/index.js +++ b/resources/app/index.js @@ -1,10 +1,10 @@ -let keyboardLayout -navigator.keyboard.getLayoutMap().then((_keyboardLayout) => { - keyboardLayout = _keyboardLayout +let mappedSlash +navigator.keyboard.getLayoutMap().then((keyboardLayout) => { + mappedSlash = keyboardLayout.get('Slash') }) export const getSummonShortcut = (platform) => { const modifierKey = platform === 'darwin' ? 'Option' : 'Alt' - const summonKey = keyboardLayout ? keyboardLayout.get('Slash') : '/' + const summonKey = mappedSlash ? mappedSlash : '/' return { modifierKey, summonKey } }