From 22b055ac69fe1ed10aa130541c85928a6d8fbfb3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Renaudeau?= <gaetan.renaudeau@ledger.fr>
Date: Mon, 28 May 2018 16:04:39 +0200
Subject: [PATCH 1/2] Take QRCode component from vault + use live-common
 URIScheme

---
 package.json                                 |   2 +-
 src/components/CurrentAddress/index.js       |  25 +-
 src/components/CurrentAddressForAccount.js   |   2 +-
 src/components/QRCodeCameraPickerCanvas.js   | 239 +++++++++++++++++++
 src/components/RecipientAddress/index.js     |  42 ++--
 src/components/base/Input/index.js           |   1 +
 src/components/modals/Send/01-step-amount.js |  14 +-
 yarn.lock                                    |  33 +--
 8 files changed, 302 insertions(+), 56 deletions(-)
 create mode 100644 src/components/QRCodeCameraPickerCanvas.js

diff --git a/package.json b/package.json
index 52bcc28d..fabbcf28 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
     "moment": "^2.22.1",
     "object-path": "^0.11.4",
     "qrcode": "^1.2.0",
+    "qrcode-reader": "^1.0.4",
     "qs": "^6.5.1",
     "raven": "^2.5.0",
     "raven-js": "^3.24.2",
@@ -74,7 +75,6 @@
     "react-i18next": "^7.6.0",
     "react-mortal": "^3.2.0",
     "react-motion": "^0.5.2",
-    "react-qr-reader": "^2.1.0",
     "react-redux": "^5.0.7",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
diff --git a/src/components/CurrentAddress/index.js b/src/components/CurrentAddress/index.js
index 1b95a372..da14bb32 100644
--- a/src/components/CurrentAddress/index.js
+++ b/src/components/CurrentAddress/index.js
@@ -3,6 +3,8 @@
 import React, { PureComponent } from 'react'
 import { Trans, translate } from 'react-i18next'
 import styled from 'styled-components'
+import { encodeURIScheme } from '@ledgerhq/live-common/lib/helpers/currencies'
+import type { Account } from '@ledgerhq/live-common/lib/types'
 
 import noop from 'lodash/noop'
 
@@ -111,14 +113,14 @@ const FooterButton = ({
 )
 
 type Props = {
-  accountName?: string,
+  account: Account,
   address: string,
+  amount?: number,
   addressVerified?: boolean,
-  amount?: string,
-  onCopy: Function,
-  onPrint: Function,
-  onShare: Function,
-  onVerify: Function,
+  onCopy: () => void,
+  onPrint: () => void,
+  onShare: () => void,
+  onVerify: () => void,
   t: T,
   withBadge: boolean,
   withFooter: boolean,
@@ -142,7 +144,7 @@ class CurrentAddress extends PureComponent<Props> {
 
   render() {
     const {
-      accountName,
+      account: { name: accountName, currency },
       address,
       addressVerified,
       amount,
@@ -164,7 +166,14 @@ class CurrentAddress extends PureComponent<Props> {
       <Container withQRCode={withQRCode} notValid={notValid} {...props}>
         {withQRCode && (
           <Box mb={4}>
-            <QRCode size={120} data={`bitcoin:${address}${amount ? `?amount=${amount}` : ''}`} />
+            <QRCode
+              size={120}
+              data={encodeURIScheme({
+                address,
+                amount,
+                currency,
+              })}
+            />
           </Box>
         )}
         <Label>
diff --git a/src/components/CurrentAddressForAccount.js b/src/components/CurrentAddressForAccount.js
index 2d31136d..bff4accb 100644
--- a/src/components/CurrentAddressForAccount.js
+++ b/src/components/CurrentAddressForAccount.js
@@ -11,5 +11,5 @@ type Props = {
 
 export default function CurrentAddressForAccount(props: Props) {
   const { account, ...p } = props
-  return <CurrentAddress accountName={account.name} address={account.freshAddress} {...p} />
+  return <CurrentAddress account={account} address={account.freshAddress} {...p} />
 }
diff --git a/src/components/QRCodeCameraPickerCanvas.js b/src/components/QRCodeCameraPickerCanvas.js
new file mode 100644
index 00000000..13c2c27d
--- /dev/null
+++ b/src/components/QRCodeCameraPickerCanvas.js
@@ -0,0 +1,239 @@
+// @flow
+
+import React, { Component } from 'react'
+import QrCode from 'qrcode-reader'
+
+export default class QRCodeCameraPickerCanvas extends Component<
+  {
+    width: number,
+    height: number,
+    centerSize: number,
+    cameraBorderSize: number,
+    cameraBorderLength: number,
+    intervalCheck: number,
+    dpr: number,
+    onPick: string => void,
+  },
+  {
+    message: ?string,
+  },
+> {
+  static defaultProps = {
+    width: 260,
+    height: 185,
+    centerSize: 110,
+    cameraBorderSize: 4,
+    cameraBorderLength: 35,
+    intervalCheck: 250,
+    dpr: window.devicePixelRatio || 1,
+  }
+
+  state = {
+    message: 'Please accept Camera permission',
+  }
+
+  componentDidMount() {
+    let getUserMedia
+    let sum = 0
+    const onkeyup = (e: *) => {
+      sum += e.which
+      if (sum === 439 && this.canvasSecond) {
+        this.canvasSecond.style.filter = 'hue-rotate(90deg)'
+      }
+    }
+    if (document) document.addEventListener('keyup', onkeyup)
+    this.unsubscribes.push(() => {
+      if (document) document.removeEventListener('keyup', onkeyup)
+    })
+    const { navigator } = window
+    if (navigator.mediaDevices) {
+      const mediaDevices = navigator.mediaDevices
+      getUserMedia = opts => mediaDevices.getUserMedia(opts)
+    } else {
+      const f = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia
+      if (f) {
+        getUserMedia = opts => new Promise((res, rej) => f.call(navigator, opts, res, rej))
+      }
+    }
+
+    if (!getUserMedia) {
+      this.setState({ message: 'Incompatible browser' }) // eslint-disable-line
+    } else {
+      const qr = new QrCode()
+      qr.callback = (err, value) => {
+        if (!err) {
+          this.props.onPick(value.result)
+        }
+      }
+      getUserMedia({
+        video: { facingMode: 'environment' },
+      })
+        .then(stream => {
+          if (this.unmounted) return
+          this.setState({ message: null })
+          let video = document.createElement('video')
+          video.setAttribute('playsinline', 'true')
+          video.setAttribute('autoplay', 'true')
+          video.srcObject = stream
+          video.load()
+          this.unsubscribes.push(() => {
+            if (video) {
+              video.pause()
+              video.srcObject = null
+              video = null
+            }
+          })
+          video.onloadedmetadata = () => {
+            if (this.unmounted || !video) return
+            try {
+              video.play()
+            } catch (e) {
+              console.error(e)
+            }
+            let lastCheck = 0
+            let raf
+            const loop = (t: number) => {
+              raf = requestAnimationFrame(loop)
+              const { ctxMain, ctxSecond } = this
+              if (!ctxMain || !ctxSecond || !video) return
+              const {
+                centerSize,
+                cameraBorderSize,
+                cameraBorderLength,
+                dpr,
+                intervalCheck,
+              } = this.props
+              const cs = centerSize * dpr
+              const cbs = cameraBorderSize * dpr
+              const cbl = cameraBorderLength * dpr
+              const { width, height } = ctxMain.canvas
+              ctxMain.drawImage(video, 0, 0, width, height)
+
+              // draw second in the inner
+              const x = Math.floor((width - cs) / 2 - cbs)
+              const y = Math.floor((height - cs) / 2 - cbs)
+              const w = cs + cbs * 2
+              const h = cs + cbs * 2
+              ctxSecond.beginPath()
+              ctxSecond.rect(x, y, w, h)
+              ctxSecond.clip()
+              ctxSecond.drawImage(ctxMain.canvas, 0, 0)
+
+              // draw the camera borders
+              ctxSecond.strokeStyle = '#fff'
+              ctxSecond.lineWidth = cbs
+              ctxSecond.beginPath()
+              ctxSecond.moveTo(x + cbl, y)
+              ctxSecond.lineTo(x, y)
+              ctxSecond.lineTo(x, y + cbl)
+              ctxSecond.stroke()
+              ctxSecond.beginPath()
+              ctxSecond.moveTo(x + cbl, y + h)
+              ctxSecond.lineTo(x, y + h)
+              ctxSecond.lineTo(x, y + h - cbl)
+              ctxSecond.stroke()
+              ctxSecond.beginPath()
+              ctxSecond.moveTo(x + w - cbl, y + h)
+              ctxSecond.lineTo(x + w, y + h)
+              ctxSecond.lineTo(x + w, y + h - cbl)
+              ctxSecond.stroke()
+              ctxSecond.beginPath()
+              ctxSecond.moveTo(x + w - cbl, y)
+              ctxSecond.lineTo(x + w, y)
+              ctxSecond.lineTo(x + w, y + cbl)
+              ctxSecond.stroke()
+
+              if (t - lastCheck >= intervalCheck) {
+                lastCheck = t
+                qr.decode(ctxMain.getImageData(0, 0, width, height))
+              }
+            }
+            raf = requestAnimationFrame(loop)
+            this.unsubscribes.push(() => cancelAnimationFrame(raf))
+          }
+        })
+        .catch(e => {
+          if (this.unmounted) return
+          this.setState({
+            message: String(e.message || e),
+          })
+        })
+    }
+  }
+  componentWillUnmount() {
+    this.unmounted = true
+    this.unsubscribes.forEach(f => f())
+  }
+
+  canvasMain: ?HTMLCanvasElement
+  ctxMain: ?CanvasRenderingContext2D
+  canvasSecond: ?HTMLCanvasElement
+  ctxSecond: ?CanvasRenderingContext2D
+  unsubscribes: Array<() => void> = []
+  unmounted = false
+
+  _onMainRef = (canvasMain: ?HTMLCanvasElement) => {
+    if (canvasMain === this.canvasMain) return
+    this.canvasMain = canvasMain
+    if (canvasMain) {
+      this.ctxMain = canvasMain.getContext('2d')
+    }
+  }
+
+  _onSecondRef = (canvasSecond: ?HTMLCanvasElement) => {
+    if (canvasSecond === this.canvasSecond) return
+    this.canvasSecond = canvasSecond
+    if (canvasSecond) {
+      this.ctxSecond = canvasSecond.getContext('2d')
+    }
+  }
+
+  render() {
+    const { width, height, dpr } = this.props
+    const { message } = this.state
+    const style = {
+      width,
+      height,
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      background: '#eee',
+      color: '#666',
+      fontSize: `${(width / 30).toFixed(0)}px`,
+      overflow: 'hidden',
+    }
+    const mainStyle = {
+      width,
+      height,
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      filter: 'brightness(80%) blur(6px)',
+      transform: 'scaleX(-1)',
+    }
+    const secondStyle = {
+      width,
+      height,
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      transform: 'scaleX(-1)',
+    }
+    return message ? (
+      <div style={style}>
+        <p>{message}</p>
+      </div>
+    ) : (
+      <div style={style}>
+        <canvas ref={this._onMainRef} style={mainStyle} width={dpr * width} height={dpr * height} />
+        <canvas
+          ref={this._onSecondRef}
+          style={secondStyle}
+          width={dpr * width}
+          height={dpr * height}
+        />
+      </div>
+    )
+  }
+}
diff --git a/src/components/RecipientAddress/index.js b/src/components/RecipientAddress/index.js
index 145c5e1a..450ac44f 100644
--- a/src/components/RecipientAddress/index.js
+++ b/src/components/RecipientAddress/index.js
@@ -1,12 +1,14 @@
 // @flow
 
-import React, { PureComponent } from 'react'
+import React, { PureComponent, Fragment } from 'react'
 import styled from 'styled-components'
-import QrReader from 'react-qr-reader'
 import noop from 'lodash/noop'
+import { decodeURIScheme } from '@ledgerhq/live-common/lib/helpers/currencies'
+import type { CryptoCurrency } from '@ledgerhq/live-common/lib/types'
 
 import { radii } from 'styles/theme'
 
+import QRCodeCameraPickerCanvas from 'components/QRCodeCameraPickerCanvas'
 import Box from 'components/base/Box'
 import Input from 'components/base/Input'
 
@@ -28,13 +30,22 @@ const WrapperQrCode = styled(Box)`
   position: absolute;
   right: 0;
   top: 100%;
+  z-index: 3;
+`
+
+const BackgroundLayer = styled(Box)`
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
   z-index: 2;
 `
 
 type Props = {
   value: string,
-  onChange: Function,
-  qrCodeSize: number,
+  // return false if it can't be changed (invalid info)
+  onChange: (string, { amount?: number, currency?: CryptoCurrency }) => ?boolean,
   withQrCode: boolean,
 }
 
@@ -46,7 +57,6 @@ class RecipientAddress extends PureComponent<Props, State> {
   static defaultProps = {
     value: '',
     onChange: noop,
-    qrCodeSize: 200,
     withQrCode: true,
   }
 
@@ -59,10 +69,15 @@ class RecipientAddress extends PureComponent<Props, State> {
       qrReaderOpened: !prev.qrReaderOpened,
     }))
 
-  handleScanQrCode = (data: string) => data !== null && this.props.onChange(data)
+  handleOnPick = (code: string) => {
+    const { address, ...rest } = decodeURIScheme(code)
+    if (this.props.onChange(address, rest) !== false) {
+      this.setState({ qrReaderOpened: false })
+    }
+  }
 
   render() {
-    const { onChange, qrCodeSize, withQrCode, value } = this.props
+    const { onChange, withQrCode, value } = this.props
     const { qrReaderOpened } = this.state
 
     return (
@@ -75,13 +90,12 @@ class RecipientAddress extends PureComponent<Props, State> {
             <Right onClick={this.handleClickQrCode}>
               <IconQrCode size={16} />
               {qrReaderOpened && (
-                <WrapperQrCode>
-                  <QrReader
-                    onScan={this.handleScanQrCode}
-                    onError={noop}
-                    style={{ height: qrCodeSize, width: qrCodeSize }}
-                  />
-                </WrapperQrCode>
+                <Fragment>
+                  <BackgroundLayer />
+                  <WrapperQrCode>
+                    <QRCodeCameraPickerCanvas onPick={this.handleOnPick} />
+                  </WrapperQrCode>
+                </Fragment>
               )}
             </Right>
           }
diff --git a/src/components/base/Input/index.js b/src/components/base/Input/index.js
index 1fdac9d1..906fae6e 100644
--- a/src/components/base/Input/index.js
+++ b/src/components/base/Input/index.js
@@ -100,6 +100,7 @@ class Input extends PureComponent<Props, State> {
     }
   }
 
+  // FIXME this is a bad idea! this is the behavior of an input. instead renderLeft/renderRight should be pointer-event:none !
   handleClick = () => this._input && this._input.focus()
 
   handleFocus = (e: SyntheticInputEvent<HTMLInputElement>) => {
diff --git a/src/components/modals/Send/01-step-amount.js b/src/components/modals/Send/01-step-amount.js
index 96385eec..e9f6bbf6 100644
--- a/src/components/modals/Send/01-step-amount.js
+++ b/src/components/modals/Send/01-step-amount.js
@@ -26,10 +26,18 @@ const RecipientField = ({ bridge, account, transaction, onChangeTransaction, t }
     <RecipientAddress
       withQrCode
       value={bridge.getTransactionRecipient(account, transaction)}
-      onChange={recipient =>
+      onChange={(recipient, { amount, currency }) => {
+        console.log(recipient, amount, currency, account.currency)
         // TODO we should use isRecipientValid & provide a feedback to user
-        onChangeTransaction(bridge.editTransactionRecipient(account, transaction, recipient))
-      }
+        if (currency && currency.scheme !== account.currency.scheme) return false
+        let t = transaction
+        if (amount) {
+          t = bridge.editTransactionAmount(account, t, amount)
+        }
+        t = bridge.editTransactionRecipient(account, t, recipient)
+        onChangeTransaction(t)
+        return true
+      }}
     />
   </Box>
 )
diff --git a/yarn.lock b/yarn.lock
index 61f19921..58ece7be 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8583,10 +8583,6 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
-jsqr@^1.0.1:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/jsqr/-/jsqr-1.0.4.tgz#e2ea353fa81007708efab7d95b2652a7254c10dd"
-
 jsx-ast-utils@^2.0.0, jsx-ast-utils@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz#e801b1b39985e20fffc87b40e3748080e2dcac7f"
@@ -11071,6 +11067,10 @@ q@^1.1.2:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
 
+qrcode-reader@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/qrcode-reader/-/qrcode-reader-1.0.4.tgz#95d9bb9e8130800361a96cb5a43124ad1d9e06b8"
+
 qrcode-terminal@^0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/qrcode-terminal/-/qrcode-terminal-0.12.0.tgz#bb5b699ef7f9f0505092a3748be4464fe71b5819"
@@ -11365,14 +11365,6 @@ react-portal@^4.1.2:
   dependencies:
     prop-types "^15.5.8"
 
-react-qr-reader@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/react-qr-reader/-/react-qr-reader-2.1.0.tgz#f429c196675a710926da1cc9057223b79358da75"
-  dependencies:
-    jsqr "^1.0.1"
-    prop-types "^15.5.8"
-    webrtc-adapter "^6.1.1"
-
 react-redux@^5.0.7:
   version "5.0.7"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.7.tgz#0dc1076d9afb4670f993ffaef44b8f8c1155a4c8"
@@ -12162,12 +12154,6 @@ rsvp@^3.3.3:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-3.6.2.tgz#2e96491599a96cde1b515d5674a8f7a91452926a"
 
-rtcpeerconnection-shim@^1.2.10:
-  version "1.2.11"
-  resolved "https://registry.yarnpkg.com/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.11.tgz#df2b2456020365daf26bf8c135523bca2deb252b"
-  dependencies:
-    sdp "^2.6.0"
-
 run-async@^2.0.0, run-async@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
@@ -12274,10 +12260,6 @@ scoped-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/scoped-regex/-/scoped-regex-1.0.0.tgz#a346bb1acd4207ae70bd7c0c7ca9e566b6baddb8"
 
-sdp@^2.6.0, sdp@^2.7.0:
-  version "2.7.4"
-  resolved "https://registry.yarnpkg.com/sdp/-/sdp-2.7.4.tgz#cac76b0e2f16f55243d25bc0432f6bbb5488bfc1"
-
 secp256k1@^3.0.1:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/secp256k1/-/secp256k1-3.5.0.tgz#677d3b8a8e04e1a5fa381a1ae437c54207b738d0"
@@ -14062,13 +14044,6 @@ webpack@^4.6.0:
     watchpack "^1.5.0"
     webpack-sources "^1.0.1"
 
-webrtc-adapter@^6.1.1:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/webrtc-adapter/-/webrtc-adapter-6.2.1.tgz#4d0eda592f27d5f3288ea8ae11c1245ac156d676"
-  dependencies:
-    rtcpeerconnection-shim "^1.2.10"
-    sdp "^2.7.0"
-
 websocket-driver@>=0.5.1:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.0.tgz#0caf9d2d755d93aee049d4bdd0d3fe2cca2a24eb"

From d7ab8c41280908fcbe29d4cd706e99c4ec391b1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Renaudeau?= <gaetan.renaudeau@ledger.fr>
Date: Mon, 28 May 2018 16:30:14 +0200
Subject: [PATCH 2/2] Remove app devtools

---
 src/components/App.js        |   2 -
 src/components/DevTools.js   | 298 -----------------------------------
 src/components/layout/Dev.js |  29 ----
 src/helpers/cpuUsage.js      |  43 -----
 src/internals/index.js       |  20 +--
 src/main/app.js              |  57 +------
 src/main/bridge.js           |  11 --
 src/main/menu.js             |   9 --
 8 files changed, 2 insertions(+), 467 deletions(-)
 delete mode 100644 src/components/DevTools.js
 delete mode 100644 src/components/layout/Dev.js
 delete mode 100644 src/helpers/cpuUsage.js

diff --git a/src/components/App.js b/src/components/App.js
index dd659344..8a1898e4 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -16,7 +16,6 @@ import Onboarding from 'components/Onboarding'
 
 import ThrowBlock from 'components/ThrowBlock'
 import Default from 'components/layout/Default'
-import Dev from 'components/layout/Dev'
 import Print from 'components/layout/Print'
 import CounterValues from 'helpers/countervalues'
 import { BridgeSyncProvider } from 'bridge/BridgeSyncContext'
@@ -41,7 +40,6 @@ const App = ({
               <Onboarding />
               <ConnectedRouter history={history}>
                 <Switch>
-                  {(__DEV__ || DEV_TOOLS) && <Route path="/dev" component={Dev} />}
                   <Route path="/print" component={Print} />
                   <Route component={Default} />
                 </Switch>
diff --git a/src/components/DevTools.js b/src/components/DevTools.js
deleted file mode 100644
index 9baa004c..00000000
--- a/src/components/DevTools.js
+++ /dev/null
@@ -1,298 +0,0 @@
-// @flow
-
-/* eslint-disable import/no-named-as-default-member */
-
-import React, { PureComponent } from 'react'
-import { remote, ipcRenderer } from 'electron'
-import { translate } from 'react-i18next'
-import styled from 'styled-components'
-import color from 'color'
-import fs from 'fs'
-import path from 'path'
-
-import takeRight from 'lodash/takeRight'
-import last from 'lodash/last'
-import reduce from 'lodash/fp/reduce'
-import flow from 'lodash/fp/flow'
-import filter from 'lodash/fp/filter'
-import sortBy from 'lodash/fp/sortBy'
-import chunk from 'lodash/chunk'
-
-import Chart from 'components/base/Chart'
-import Box from 'components/base/Box'
-import Bar from 'components/base/Bar'
-import CopyToClipboard from 'components/base/CopyToClipboard'
-
-import staticPath from 'helpers/staticPath'
-
-import theme from 'styles/theme'
-
-const getLanguages = p => fs.readdirSync(p).filter(f => fs.statSync(path.join(p, f)).isDirectory())
-const languages = getLanguages(path.join(staticPath, '/i18n'))
-
-const mainWindow = remote.BrowserWindow.getAllWindows().find(w => w.name === 'MainWindow')
-
-type HslColor = {
-  color: Array<number>,
-}
-
-type ColorType = {
-  name: string,
-  val: string,
-  isDark: boolean,
-  color: {
-    isDark: () => boolean,
-    hsl: () => HslColor,
-  },
-}
-
-type SimpleType = {
-  name: string,
-  val: string,
-}
-
-const transform = flow(
-  reduce.convert({ cap: false })((acc, cur, key) => {
-    const c = color(cur)
-    return [
-      ...acc,
-      {
-        name: key,
-        val: cur,
-        color: c,
-        isDark: c.isDark(),
-      },
-    ]
-  }, []),
-  filter(el => el.name !== 'transparent'),
-  sortBy(el => el.color.hsl().color[2]),
-)
-
-const colors: Array<ColorType> = transform(theme.colors)
-const spaces: Array<SimpleType> = theme.space.map((s, i) => ({
-  name: s.toString(),
-  val: i.toString(),
-}))
-const fontSizes: Array<SimpleType> = theme.fontSizes.map((s, i) => ({
-  name: s.toString(),
-  val: i.toString(),
-}))
-
-const Container = styled(Box).attrs({
-  bg: 'dark',
-  p: 5,
-  grow: true,
-  color: 'white',
-  fontSize: 3,
-})``
-
-const Title = styled(Box).attrs({
-  color: 'white',
-})`
-  text-transform: uppercase;
-`
-
-const Items = styled(Box).attrs({
-  horizontal: true,
-  flow: 4,
-})``
-
-const Item = styled(Box).attrs({
-  alignItems: 'center',
-  bg: 'dark',
-  borderRadius: 1,
-  color: 'white',
-  justifyContent: 'center',
-  py: 2,
-  px: 4,
-})`
-  border: 2px solid ${p => p.theme.colors.white};
-  flex: 1;
-  overflow: hidden;
-  cursor: pointer;
-`
-
-type State = {
-  cpuUsage: Object,
-}
-
-class DevTools extends PureComponent<any, State> {
-  state = {
-    cpuUsage: {},
-  }
-
-  componentDidMount() {
-    ipcRenderer.on('msg', this.handleMessage)
-  }
-
-  componentWillUnmount() {
-    ipcRenderer.removeListener('msg', this.handleMessage)
-  }
-
-  handleMessage = (e: any, { type, data }: Object) => {
-    if (type === 'usage.cpu') {
-      this.setState(prev => ({
-        cpuUsage: {
-          ...prev.cpuUsage,
-          [data.name]: takeRight(
-            [
-              ...(prev.cpuUsage[data.name] || []),
-              {
-                date: new Date().getTime().toString(),
-                value: parseFloat(data.value),
-              },
-            ],
-            10,
-          ),
-        },
-      }))
-    }
-  }
-
-  handleChangeLanguage = lang => () => {
-    mainWindow.webContents.send('msg', {
-      type: 'application.changeLanguage',
-      data: lang,
-    })
-  }
-
-  handleStartSync = () =>
-    mainWindow.webContents.send('msg', {
-      type: 'accounts.sync.start',
-    })
-
-  handleStopSync = () =>
-    mainWindow.webContents.send('msg', {
-      type: 'accounts.sync.stop',
-    })
-
-  render() {
-    const { cpuUsage } = this.state
-
-    return (
-      <Container>
-        <Box grow flow={4}>
-          <Section title="Colors">
-            {chunk(colors, 5).map((c, i) => (
-              <Items
-                key={i} // eslint-disable-line react/no-array-index-key
-              >
-                {c.map(color => (
-                  <CopyToClipboard
-                    key={color.name}
-                    data={color.name}
-                    render={copy => <Color color={color} onClick={copy} />}
-                  />
-                ))}
-              </Items>
-            ))}
-          </Section>
-          <Section title="Space">
-            {chunk(spaces, 5).map((s, i) => (
-              <Items
-                key={i} // eslint-disable-line react/no-array-index-key
-              >
-                {s.map(space => (
-                  <CopyToClipboard
-                    key={space.val}
-                    data={space.val}
-                    render={copy => <Item onClick={copy}>{space.name}</Item>}
-                  />
-                ))}
-              </Items>
-            ))}
-          </Section>
-          <Section title="Font Sizes">
-            {chunk(fontSizes, 5).map((f, i) => (
-              <Items
-                key={i} // eslint-disable-line react/no-array-index-key
-              >
-                {f.map(fontSize => (
-                  <CopyToClipboard
-                    key={fontSize.val}
-                    data={fontSize.val}
-                    render={copy => <Item onClick={copy}>{fontSize.name}</Item>}
-                  />
-                ))}
-              </Items>
-            ))}
-          </Section>
-          <Bar size={2} color="white" />
-          <Section title="Languages" horizontal>
-            {languages.map(lang => (
-              <Item key={lang} onClick={this.handleChangeLanguage(lang)} style={{ flex: 0 }}>
-                {lang}
-              </Item>
-            ))}
-          </Section>
-          <Bar size={2} color="white" />
-          <Section title="Sync Accounts" horizontal>
-            <Item onClick={this.handleStartSync} style={{ flex: 0 }}>
-              Start
-            </Item>
-            <Item onClick={this.handleStopSync} style={{ flex: 0 }}>
-              Stop
-            </Item>
-          </Section>
-          <Bar size={2} color="white" />
-          <Section title="CPU Usage">
-            {chunk(Object.keys(cpuUsage).sort(), 2).map((l, i) => (
-              <Items
-                key={i} // eslint-disable-line react/no-array-index-key
-              >
-                {l.map(k => (
-                  <Box key={k} style={{ flex: 1 }}>
-                    <Box horizontal alignItems="center" flow={2}>
-                      <Box fontSize={1}>{last(cpuUsage[k]).value}%</Box>
-                      <Box>{k}</Box>
-                    </Box>
-                    <Box>
-                      <Chart
-                        id={k}
-                        data={cpuUsage[k]}
-                        dateFormat="%Q"
-                        color="#8884d8"
-                        height={50}
-                        hideAxis
-                        isInteractive={false}
-                      />
-                    </Box>
-                  </Box>
-                ))}
-              </Items>
-            ))}
-          </Section>
-        </Box>
-      </Container>
-    )
-  }
-}
-
-const Color = ({ onClick, color }: { onClick: Function, color: ColorType }) => (
-  <Item bg={color.val} color={color.isDark ? 'white' : 'dark'} onClick={onClick}>
-    {color.name}
-  </Item>
-)
-
-const Section = ({
-  title,
-  children,
-  horizontal,
-}: {
-  title: string,
-  children: any,
-  horizontal?: boolean,
-}) => (
-  <Box flow={2}>
-    <Title>{title}</Title>
-    <Box flow={4} horizontal={horizontal}>
-      {children}
-    </Box>
-  </Box>
-)
-
-Section.defaultProps = {
-  horizontal: false,
-}
-
-export default translate()(DevTools)
diff --git a/src/components/layout/Dev.js b/src/components/layout/Dev.js
deleted file mode 100644
index c8ffdd24..00000000
--- a/src/components/layout/Dev.js
+++ /dev/null
@@ -1,29 +0,0 @@
-// @flow
-
-import React, { PureComponent } from 'react'
-import styled from 'styled-components'
-
-import Box from 'components/base/Box'
-import GrowScroll from 'components/base/GrowScroll'
-
-import DevTools from 'components/DevTools'
-
-const Container = styled(Box).attrs({
-  grow: true,
-})`
-  height: 100%;
-`
-
-class Dev extends PureComponent<{}> {
-  render() {
-    return (
-      <Container>
-        <GrowScroll>
-          <DevTools />
-        </GrowScroll>
-      </Container>
-    )
-  }
-}
-
-export default Dev
diff --git a/src/helpers/cpuUsage.js b/src/helpers/cpuUsage.js
deleted file mode 100644
index e21d03ad..00000000
--- a/src/helpers/cpuUsage.js
+++ /dev/null
@@ -1,43 +0,0 @@
-const TIMEOUT_CPU_USAGE = 5e3
-
-const wait = ms => new Promise(resolve => setTimeout(resolve, ms))
-
-const cpuUsage = async (startTime, startUsage) => {
-  await wait(500)
-
-  const newStartTime = process.hrtime()
-  const newStartUsage = process.cpuUsage()
-
-  const elapTime = process.hrtime(startTime)
-  const elapUsage = process.cpuUsage(startUsage)
-
-  startTime = newStartTime
-  startUsage = newStartUsage
-
-  const elapTimeMS = elapTime[0] * 1e3 + elapTime[1] / 1e6
-
-  const elapUserMS = elapUsage.user / 1e3
-  const elapSystMS = elapUsage.system / 1e3
-  const cpuPercent = (100 * (elapUserMS + elapSystMS) / elapTimeMS).toFixed(1)
-
-  return {
-    cpuPercent,
-    newStartTime: startTime,
-    newStartUsage: startUsage,
-  }
-}
-
-export default callback => {
-  const initCpuUsage = async (startTime, startUsage) => {
-    const { cpuPercent, newStartTime, newStartUsage } = await cpuUsage(startTime, startUsage)
-
-    callback(cpuPercent)
-
-    setTimeout(() => initCpuUsage(newStartTime, newStartUsage), TIMEOUT_CPU_USAGE)
-  }
-
-  const startTime = process.hrtime()
-  const startUsage = process.cpuUsage()
-
-  initCpuUsage(startTime, startUsage)
-}
diff --git a/src/internals/index.js b/src/internals/index.js
index 4cc59b34..36ec3c28 100644
--- a/src/internals/index.js
+++ b/src/internals/index.js
@@ -3,12 +3,10 @@
 import objectPath from 'object-path'
 import capitalize from 'lodash/capitalize'
 
-import cpuUsage from 'helpers/cpuUsage'
-
 require('../env')
 require('../init-sentry')
 
-const { DEV_TOOLS, FORK_TYPE } = process.env
+const { FORK_TYPE } = process.env
 
 process.title = `${require('../../package.json').productName} ${capitalize(FORK_TYPE)}`
 
@@ -44,19 +42,3 @@ process.on('message', payload => {
     handler(sendEvent, data)
   }
 })
-
-if (__DEV__ || DEV_TOOLS) {
-  cpuUsage(cpuPercent =>
-    sendEvent(
-      'usage.cpu',
-      {
-        name: FORK_TYPE,
-        value: cpuPercent,
-      },
-      {
-        window: 'DevWindow',
-        kill: false,
-      },
-    ),
-  )
-}
diff --git a/src/main/app.js b/src/main/app.js
index 01f35768..e923e21f 100644
--- a/src/main/app.js
+++ b/src/main/app.js
@@ -15,13 +15,7 @@ let mainWindow = null
 
 let forceClose = false
 
-const {
-  UPGRADE_EXTENSIONS,
-  ELECTRON_WEBPACK_WDS_PORT,
-  DEV_TOOLS,
-  DEV_TOOLS_MODE,
-  HIDE_DEV_WINDOW,
-} = process.env
+const { UPGRADE_EXTENSIONS, ELECTRON_WEBPACK_WDS_PORT, DEV_TOOLS, DEV_TOOLS_MODE } = process.env
 
 const devTools = __DEV__ || DEV_TOOLS
 
@@ -204,51 +198,6 @@ function createMainWindow() {
   return window
 }
 
-function createDevWindow() {
-  const MIN_HEIGHT = 500
-  const MIN_WIDTH = 360
-
-  const savedPositions = db.getIn('settings', 'window.DevWindow.positions', null)
-
-  const width = MIN_WIDTH
-  const height = MIN_HEIGHT
-
-  const windowOptions = {
-    ...defaultWindowOptions,
-    ...(savedPositions !== null ? savedPositions : {}),
-    fullscreenable: false,
-    resizable: false,
-    height,
-    minHeight: MIN_HEIGHT,
-    minWidth: MIN_WIDTH,
-    show: false,
-    skipTaskbar: true,
-    title: 'Dev Tools',
-    width,
-  }
-
-  const window = new BrowserWindow(windowOptions)
-
-  window.name = 'DevWindow'
-
-  const url = getDefaultUrl()
-
-  saveWindowSettings(window)
-
-  window.loadURL(`${url}#/dev`)
-
-  window.setMenu(null)
-
-  window.on('close', handleCloseWindow(window))
-
-  window.on('ready-to-show', () => window.show())
-
-  // Don't want to use HTML <title>
-  window.on('page-title-updated', e => e.preventDefault())
-
-  return window
-}
-
 app.on('before-quit', () => {
   forceClose = true
 })
@@ -287,10 +236,6 @@ app.on('ready', async () => {
     await installExtensions()
   }
 
-  if (devTools && !HIDE_DEV_WINDOW) {
-    createDevWindow()
-  }
-
   Menu.setApplicationMenu(menu)
 
   mainWindow = createMainWindow()
diff --git a/src/main/bridge.js b/src/main/bridge.js
index 75f0948f..efe03485 100644
--- a/src/main/bridge.js
+++ b/src/main/bridge.js
@@ -6,8 +6,6 @@ import { BrowserWindow, ipcMain, app } from 'electron'
 import objectPath from 'object-path'
 import path from 'path'
 
-import cpuUsage from 'helpers/cpuUsage'
-
 import setupAutoUpdater, { quitAndInstall } from './autoUpdate'
 
 const { DEV_TOOLS } = process.env
@@ -100,12 +98,3 @@ ipcMain.on('msg', (event: any, payload) => {
   const send = (type: string, data: *) => event.sender.send('msg', { type, data })
   handler(send, data, type)
 })
-
-if (__DEV__ || DEV_TOOLS) {
-  cpuUsage(cpuPercent =>
-    sendEventToWindow('DevWindow', {
-      type: 'usage.cpu',
-      data: { name: 'main', value: cpuPercent },
-    }),
-  )
-}
diff --git a/src/main/menu.js b/src/main/menu.js
index 9d997036..a0001f40 100644
--- a/src/main/menu.js
+++ b/src/main/menu.js
@@ -44,15 +44,6 @@ const template = [
           ...props(
             __DEV__ || DEV_TOOLS,
             [
-              {
-                label: 'App Dev Tools',
-                click() {
-                  const devWindow = BrowserWindow.getAllWindows().find(w => w.name === 'DevWindow')
-                  if (devWindow) {
-                    devWindow.show()
-                  }
-                },
-              },
               {
                 label: 'Main Window Dev Tools',
                 click() {