Merge pull request #376 from gre/add-debug-modal

add Debug modal to stress-test things / display useful data for devs

src/components/TopBar/index.js

@@ -13,6 +13,7 @@ import type { T } from 'types/common'
 import { rgba } from 'styles/helpers'
 import { lock } from 'reducers/application'
 import { hasPassword } from 'reducers/settings'
+import { openModal } from 'reducers/modals'
 
 import IconDevices from 'icons/Devices'
 import IconLock from 'icons/Lock'
@@ -57,6 +58,7 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = {
   lock,
+  openModal,
 }
 
 type Props = {
@@ -64,9 +66,12 @@ type Props = {
   history: RouterHistory,
   location: Location,
   lock: Function,
+  openModal: string => void,
   t: T,
 }
 
+let settingsClickTimes = []
+
 class TopBar extends PureComponent<Props> {
   handleLock = () => this.props.lock()
 
@@ -74,6 +79,13 @@ class TopBar extends PureComponent<Props> {
     const { location, history } = this.props
     const url = '/settings'
 
+    const now = Date.now()
+    settingsClickTimes = settingsClickTimes.filter(t => now - t < 3000).concat(now)
+    if (settingsClickTimes.length === 7) {
+      settingsClickTimes = []
+      this.props.openModal('MODAL_DEBUG')
+    }
+
     if (location.pathname !== url) {
       history.push(url)
     }

src/components/modals/Debug.js

@@ -0,0 +1,103 @@
+// @flow
+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 Button from 'components/base/Button'
+import Box from 'components/base/Box'
+import EnsureDevice from 'components/ManagerPage/EnsureDevice'
+import { getDerivations } from 'helpers/derivations'
+import getAddress from 'commands/getAddress'
+
+class Debug extends Component<*, *> {
+  state = {
+    logs: [],
+  }
+
+  onClickStressDevice = (device: *) => async () => {
+    try {
+      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()
+
+        this.log(`derivated ${path} = ${address}`)
+      }
+    } catch (e) {
+      this.error(e)
+    }
+  }
+
+  onHide = () => {
+    this.setState({ logs: [] })
+  }
+
+  log = (txt: string) => {
+    this.setState(({ logs }) => ({ logs: logs.concat({ txt, type: 'log' }) }))
+  }
+
+  error = (e: Error) => {
+    this.setState(({ logs }) => ({
+      logs: logs.concat({ txt: String((e && e.message) || e), type: 'error' }),
+    }))
+  }
+
+  render() {
+    const { logs } = this.state
+    return (
+      <Modal
+        name="MODAL_DEBUG"
+        onHide={this.onHide}
+        render={({ onClose }: *) => (
+          <ModalBody onClose={onClose}>
+            <ModalTitle>DEBUG utils</ModalTitle>
+            <ModalContent>
+              <EnsureDevice>
+                {device => (
+                  <Box horizontal style={{ padding: 20 }}>
+                    <Button onClick={this.onClickStressDevice(device)} primary>
+                      Stress getAddress (BTC)
+                    </Button>
+                  </Box>
+                )}
+              </EnsureDevice>
+              <Box
+                style={{
+                  padding: '20px 10px',
+                  fontFamily: 'monospace',
+                  fontSize: '10px',
+                  background: '#eee',
+                  height: 300,
+                  overflow: 'auto',
+                }}
+              >
+                {logs.map(log => (
+                  <Box
+                    style={{
+                      userSelect: 'all',
+                      color: log.type === 'error' ? '#c22' : '#888',
+                    }}
+                  >
+                    {log.txt}
+                  </Box>
+                ))}
+              </Box>
+            </ModalContent>
+          </ModalBody>
+        )}
+      />
+    )
+  }
+}
+
+export default Debug

src/components/modals/index.js

@@ -1,3 +1,4 @@
+export Debug from './Debug'
 export AddAccount from './AddAccount'
 export OperationDetails from './OperationDetails'
 export Receive from './Receive'