Add a benchmark & remove dead code of EnsureDevice

src/commands/index.js

@@ -25,6 +25,7 @@ import listApps from 'commands/listApps'
 import listAppVersions from 'commands/listAppVersions'
 import listCategories from 'commands/listCategories'
 import listenDevices from 'commands/listenDevices'
+import ping from 'commands/ping'
 import signTransaction from 'commands/signTransaction'
 import testApdu from 'commands/testApdu'
 import testCrash from 'commands/testCrash'
@@ -54,6 +55,7 @@ const all: Array<Command<any, any>> = [
   listAppVersions,
   listCategories,
   listenDevices,
+  ping,
   signTransaction,
   testApdu,
   testCrash,

src/commands/ping.js

@@ -0,0 +1,15 @@
+// @flow
+
+// This is a test example for dev testing purpose.
+
+import { Observable } from 'rxjs'
+import { createCommand, Command } from 'helpers/ipc'
+
+const cmd: Command<void, string> = createCommand('ping', () =>
+  Observable.create(o => {
+    o.next('pong')
+    o.complete()
+  }),
+)
+
+export default cmd

src/components/EnsureDevice.js

@@ -1,45 +0,0 @@
-// @flow
-/* eslint-disable react/no-multi-comp */
-
-import { Component, PureComponent } from 'react'
-import { connect } from 'react-redux'
-
-import type { Node } from 'react'
-import type { Device } from 'types/common'
-
-import { getCurrentDevice } from 'reducers/devices'
-
-type Props = {
-  device: Device,
-  children: (device: Device) => Node,
-}
-
-let prevents = 0
-export class PreventDeviceChangeRecheck extends PureComponent<{}> {
-  componentDidMount() {
-    prevents++
-  }
-  componentWillUnmount() {
-    prevents--
-  }
-  render() {
-    return null
-  }
-}
-
-class EnsureDevice extends Component<Props> {
-  shouldComponentUpdate(nextProps) {
-    if (prevents > 0) return false
-    return nextProps.device !== this.props.device
-  }
-  render() {
-    const { device, children } = this.props
-    return children(device)
-  }
-}
-
-const mapStateToProps = state => ({
-  device: getCurrentDevice(state),
-})
-
-export default connect(mapStateToProps)(EnsureDevice)

src/components/ManagerPage/FirmwareUpdate.js

@@ -27,7 +27,6 @@ import Text from 'components/base/Text'
 import NanoS from 'icons/device/NanoS'
 import CheckFull from 'icons/CheckFull'
 
-import { PreventDeviceChangeRecheck } from 'components/EnsureDevice'
 import UpdateFirmwareButton from './UpdateFirmwareButton'
 
 export const getCleanVersion = (input: string): string =>
@@ -143,7 +142,6 @@ class FirmwareUpdate extends PureComponent<Props, State> {
           </Box>
           <UpdateFirmwareButton firmware={latestFirmware} onClick={this.handleDisclaimerModal} />
         </Box>
-        {modal !== 'closed' ? <PreventDeviceChangeRecheck /> : null}
         {latestFirmware && (
           <Fragment>
             <DisclaimerModal

src/components/modals/Debug.js

@@ -1,18 +1,23 @@
 // @flow
 /* eslint-disable react/jsx-no-literals */
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { createStructuredSelector } from 'reselect'
 import { getCryptoCurrencyById } from '@ledgerhq/live-common/lib/helpers/currencies'
 import last from 'lodash/last'
-import React, { Component } from 'react'
 import Modal, { ModalBody, ModalTitle, ModalContent } from 'components/base/Modal'
+import { getCurrentDevice } from 'reducers/devices'
 import Button from 'components/base/Button'
 import Box from 'components/base/Box'
 import Input from 'components/base/Input'
-import EnsureDevice from 'components/EnsureDevice'
 import { getDerivations } from 'helpers/derivations'
 import getAddress from 'commands/getAddress'
 import testInterval from 'commands/testInterval'
 import testCrash from 'commands/testCrash'
 import testApdu from 'commands/testApdu'
+import ping from 'commands/ping'
+import libcoreGetVersion from 'commands/libcoreGetVersion'
+import SyncSkipUnderPriority from '../SyncSkipUnderPriority'
 
 class Debug extends Component<*, *> {
   state = {
@@ -37,18 +42,13 @@ class Debug extends Component<*, *> {
       const currency = getCryptoCurrencyById('bitcoin')
       const derivation = last(getDerivations(currency))
       for (let x = 0; x < 20; x++) {
-        const obj = {
-          path: derivation({ currency, segwit: true, x }),
-          currencyId: currency.id,
-          devicePath: device.path,
-        }
-
-        // we start one in parallel just to stress device even more. this test race condition!
-        getAddress.send(obj)
-        getAddress.send(obj)
-
-        const { address, path } = await getAddress.send(obj).toPromise()
-
+        const { address, path } = await getAddress
+          .send({
+            path: derivation({ currency, segwit: true, x }),
+            currencyId: currency.id,
+            devicePath: device.path,
+          })
+          .toPromise()
         this.log(`derivated ${path} = ${address}`)
       }
     } catch (e) {
@@ -72,6 +72,38 @@ class Debug extends Component<*, *> {
       .subscribe(o => this.log(o.responseHex), e => this.error(e))
   }
 
+  benchmark = (device: *) => async () => {
+    const run = async (name, job) => {
+      const before = window.performance.now()
+      const res = await job()
+      const after = window.performance.now()
+      this.log(
+        `benchmark: ${Math.round((after - before) * 100) / 100}ms: ${name} => ${String(res)}`,
+      )
+    }
+
+    await run('ping process', () => ping.send().toPromise())
+    await run('libcore version', () =>
+      libcoreGetVersion
+        .send()
+        .toPromise()
+        .then(o => o.stringVersion),
+    )
+    const currency = getCryptoCurrencyById('bitcoin')
+    const derivation = last(getDerivations(currency))
+    const obj = {
+      path: derivation({ currency, segwit: true, x: 0 }),
+      currencyId: currency.id,
+      devicePath: device.path,
+    }
+    await run('getAddress', () =>
+      getAddress
+        .send(obj)
+        .toPromise()
+        .then(o => o.address),
+    )
+  }
+
   log = (txt: string) => {
     this.setState(({ logs }) => ({ logs: logs.concat({ txt, type: 'log' }) }))
   }
@@ -83,6 +115,7 @@ class Debug extends Component<*, *> {
   }
 
   render() {
+    const { device } = this.props
     const { logs } = this.state
     return (
       <Modal
@@ -90,18 +123,24 @@ class Debug extends Component<*, *> {
         onHide={this.onHide}
         render={({ onClose }: *) => (
           <ModalBody onClose={onClose}>
+            <SyncSkipUnderPriority priority={99999999} />
             <ModalTitle>developer internal tools</ModalTitle>
             <ModalContent>
               <Box style={{ height: 60, overflow: 'auto' }}>
-                <Box horizontal style={{ padding: 10 }}>
-                  <EnsureDevice>
-                    {device => (
-                      <Button onClick={this.onClickStressDevice(device)} primary>
-                        Stress getAddress (BTC)
-                      </Button>
-                    )}
-                  </EnsureDevice>
-                </Box>
+                {device && (
+                  <Box horizontal style={{ padding: 10 }}>
+                    <Button onClick={this.benchmark(device)} primary>
+                      Benchmark
+                    </Button>
+                  </Box>
+                )}
+                {device && (
+                  <Box horizontal style={{ padding: 10 }}>
+                    <Button onClick={this.onClickStressDevice(device)} primary>
+                      Derivate BTC addresses
+                    </Button>
+                  </Box>
+                )}
                 <Box horizontal style={{ padding: 10 }}>
                   <Button onClick={this.onCrash} danger>
                     crash process
@@ -113,22 +152,20 @@ class Debug extends Component<*, *> {
                   </Button>
                   <Button onClick={this.cancelAllPeriods}>Cancel</Button>
                 </Box>
-                <EnsureDevice>
-                  {device => (
-                    <Box horizontal style={{ padding: 10 }}>
-                      <Box grow>
-                        <Input
-                          placeholder="APDU hex ( e.g. E016000000 )"
-                          value={this.state.apdu}
-                          onChange={apdu => this.setState({ apdu })}
-                        />
-                      </Box>
-                      <Button onClick={this.runApdu(device)} primary>
-                        RUN
-                      </Button>
-                    </Box>
-                  )}
-                </EnsureDevice>
+                device && (
+                <Box horizontal style={{ padding: 10 }}>
+                  <Box grow>
+                    <Input
+                      placeholder="APDU hex ( e.g. E016000000 )"
+                      value={this.state.apdu}
+                      onChange={apdu => this.setState({ apdu })}
+                    />
+                  </Box>
+                  <Button onClick={this.runApdu(device)} primary>
+                    RUN
+                  </Button>
+                </Box>
+                )
               </Box>
               <Box
                 style={{
@@ -167,4 +204,8 @@ class Debug extends Component<*, *> {
   }
 }
 
-export default Debug
+export default connect(
+  createStructuredSelector({
+    device: getCurrentDevice,
+  }),
+)(Debug)