use existing modals

app/_locales/en/messages.json

@@ -2,6 +2,9 @@
   "accept": {
     "message": "Accept"
   },
+  "accessingYourCamera": {
+    "message": "Accesing your camera..."
+  },
   "account": {
     "message": "Account"
   },
@@ -937,6 +940,12 @@
   "info": {
   "message": "Info"
   },
+  "scanInstructions": {
+    "message": "Place the QR code in front of your camera so we can read it..."
+  },
+  "scanQrCode": {
+    "message": "Scan QR Code"
+  },
   "shapeshiftBuy": {
     "message": "Buy with Shapeshift"
   },
@@ -1086,6 +1095,9 @@
   "unknownNetworkId": {
     "message": "Unknown network ID"
   },
+  "unknownQrCode": {
+    "message": "Error: We couldn't identify that QR code"
+  },
   "unlock": {
     "message": "Unlock"
   },

app/scripts/contentscript.js

@@ -198,6 +198,6 @@ function blacklistedDomainCheck () {
  */
 function redirectToPhishingWarning () {
   console.log('MetaMask - routing to Phishing Warning component')
-  let extensionURL = extension.runtime.getURL('phishing.html')
+  const extensionURL = extension.runtime.getURL('phishing.html')
   window.location.href = extensionURL
 }

ui/app/actions.js

@@ -33,11 +33,7 @@ var actions = {
   ALERT_CLOSE: 'UI_ALERT_CLOSE',
   showAlert: showAlert,
   hideAlert: hideAlert,
-  QR_SCANNER_OPEN: 'UI_QR_SCANNER_OPEN',
-  QR_SCANNER_CLOSE: 'UI_QR_SCANNER_CLOSE',
   QR_CODE_DETECTED: 'UI_QR_CODE_DETECTED',
-  showQrScanner,
-  hideQrScanner,
   qrCodeDetected,
   // network dropdown open
   NETWORK_DROPDOWN_OPEN: 'UI_NETWORK_DROPDOWN_OPEN',
@@ -310,7 +306,6 @@ var actions = {
   CLEAR_PENDING_TOKENS: 'CLEAR_PENDING_TOKENS',
   setPendingTokens,
   clearPendingTokens,
-  scanQrCode,
 }
 
 module.exports = actions
@@ -1813,12 +1808,6 @@ function hideAlert () {
   }
 }
 
-function showQrScanner () {
-  return {
-    type: actions.QR_SCANNER_OPEN,
-  }
-}
-
 function qrCodeDetected (qrCodeData) {
   return {
     type: actions.QR_CODE_DETECTED,
@@ -1826,13 +1815,6 @@ function qrCodeDetected (qrCodeData) {
   }
 }
 
-function hideQrScanner () {
-  return {
-    type: actions.QR_SCANNER_CLOSE,
-  }
-}
-
-
 function showLoadingIndication (message) {
   return {
     type: actions.SHOW_LOADING,
@@ -2275,9 +2257,3 @@ function clearPendingTokens () {
     type: actions.CLEAR_PENDING_TOKENS,
   }
 }
-
-function scanQrCode () {
-  return (dispatch, getState) => {
-    dispatch(actions.showQrScanner())
-  }
-}

ui/app/app.js

@@ -38,9 +38,6 @@ const AccountMenu = require('./components/account-menu')
 const Modal = require('./components/modals/index').Modal
 // Global Alert
 const Alert = require('./components/alert')
-
-const QrScanner = require('./components/qr-scanner')
-
 const AppHeader = require('./components/app-header')
 
 import UnlockPage from './components/pages/unlock-page'
@@ -134,8 +131,6 @@ class App extends Component {
         // global alert
         h(Alert, {visible: this.props.alertOpen, msg: alertMessage}),
 
-        h(QrScanner, {visible: this.props.qrScannerOpen}),
-
         h(AppHeader),
 
         // sidebar
@@ -274,7 +269,6 @@ App.propTypes = {
   currentView: PropTypes.object,
   sidebarOpen: PropTypes.bool,
   alertOpen: PropTypes.bool,
-  qrScannerOpen: PropTypes.bool,
   hideSidebar: PropTypes.func,
   isMascara: PropTypes.bool,
   isOnboarding: PropTypes.bool,
@@ -311,7 +305,6 @@ function mapStateToProps (state) {
     networkDropdownOpen,
     sidebarOpen,
     alertOpen,
-    qrScannerOpen,
     alertMessage,
     isLoading,
     loadingMessage,
@@ -339,7 +332,6 @@ function mapStateToProps (state) {
     networkDropdownOpen,
     sidebarOpen,
     alertOpen,
-    qrScannerOpen,
     alertMessage,
     isLoading,
     loadingMessage,
@@ -370,7 +362,6 @@ function mapStateToProps (state) {
     isMouseUser: state.appState.isMouseUser,
     betaUI: state.metamask.featureFlags.betaUI,
     isRevealingSeedWords: state.metamask.isRevealingSeedWords,
-    Qr: state.appState.Qr,
     welcomeScreenSeen: state.metamask.welcomeScreenSeen,
 
     // state needed to get account dropdown temporarily rendering from app bar

ui/app/components/modals/modal.js

@@ -21,6 +21,7 @@ const CustomizeGasModal = require('../customize-gas-modal')
 const NotifcationModal = require('./notification-modal')
 const ConfirmResetAccount = require('./confirm-reset-account')
 const ConfirmRemoveAccount = require('./confirm-remove-account')
+const QRScanner = require('./qr-scanner')
 const TransactionConfirmed = require('./transaction-confirmed')
 const WelcomeBeta = require('./welcome-beta')
 const Notification = require('./notification')
@@ -346,6 +347,18 @@ const MODALS = {
       borderRadius: '8px',
     },
   },
+  QR_SCANNER: {
+    contents: h(QRScanner),
+    mobileModalStyle: {
+      ...modalContainerMobileStyle,
+    },
+    laptopModalStyle: {
+      ...modalContainerLaptopStyle,
+    },
+    contentStyle: {
+      borderRadius: '8px',
+    },
+  },
 
   DEFAULT: {
     contents: [],

ui/app/components/modals/qr-scanner/index.js

@@ -0,0 +1,2 @@
+import QrScanner from './qr-scanner.container'
+module.exports = QrScanner

ui/app/components/modals/qr-scanner/qr-scanner.component.js

@@ -0,0 +1,133 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { BrowserQRCodeReader } from '@zxing/library'
+import adapter from 'webrtc-adapter' // eslint-disable-line import/no-nodejs-modules, no-unused-vars
+import Spinner from '../../spinner'
+
+export default class QrScanner extends Component {
+  static propTypes = {
+    hideModal: PropTypes.func.isRequired,
+    qrCodeDetected: PropTypes.func,
+  }
+
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  constructor (props, context) {
+    super(props)
+    this.state = {
+      ready: false,
+      msg: context.t('accessingYourCamera'),
+    }
+    this.scanning = false
+    this.codeReader = null
+  }
+
+  componentDidMount () {
+    console.log('[QR-SCANNER]: componentDidUpdate', this.scanning)
+    if (!this.scanning) {
+      this.scanning = true
+      console.log('[QR-SCANNER]: componentDidUpdate - about to call initCamera')
+      this.initCamera()
+    }
+  }
+
+  initCamera () {
+    console.log('[QR-SCANNER]: initCamera')
+    this.codeReader = new BrowserQRCodeReader()
+    this.codeReader.getVideoInputDevices()
+      .then(videoInputDevices => {
+        console.log('[QR-SCANNER]: initCamera::getVideoInputDevices', videoInputDevices)
+        setTimeout(_ => {
+          this.setState({
+            ready: true,
+            msg: this.context.t('scanInstructions')})
+            console.log('[QR-SCANNER]: initCamera::ready')
+        }, 2000)
+
+        console.log('[QR-SCANNER]: initCamera::started decoding...')
+        this.codeReader.decodeFromInputVideoDevice(videoInputDevices[0].deviceId, 'video')
+        .then(content => {
+          console.log('[QR-SCANNER]: initCamera::decodeFromInputVideoDevice callback', content)
+          this.codeReader.reset()
+          const result = this.parseContent(content.text)
+          if (result.type !== 'unknown') {
+            this.props.qrCodeDetected(result)
+            this.stopAndClose()
+          } else {
+            this.setState({msg: this.context.t('unknownQrCode')})
+          }
+        })
+        .catch(err => {
+          console.error('QR-SCANNER: decodeFromInputVideoDevice threw an exception: ', err)
+        })
+      }).catch(err => {
+        console.error('QR-SCANNER: getVideoInputDevices threw an exception: ', err)
+      })
+  }
+
+  parseContent (content) {
+    let type = 'unknown'
+    let values = {}
+
+    // Here we could add more cases
+    // To parse other codes (transactions for ex.)
+
+    if (content.split('ethereum:').length > 1) {
+      type = 'address'
+      values = {'address': content.split('ethereum:')[1] }
+    }
+    return {type, values}
+  }
+
+
+  stopAndClose = () => {
+    this.codeReader.reset()
+    this.scanning = false
+    this.setState({ ready: false })
+    this.props.hideModal()
+  }
+
+  render () {
+    const { t } = this.context
+
+    return (
+      <div className="modal-container">
+       <div className="modal-container__content">
+          <div className="modal-container__title">
+            { `${t('scanQrCode')}?` }
+          </div>
+          <div className="modal-container__description">
+            <div
+              className={'qr-code-video-wrapper'}
+              style={{
+                overflow: 'hidden',
+                width: '100%',
+                height: '275px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }
+            }>
+              <video
+                id="video"
+                style={{
+                  width: 'auto',
+                  height: '275px',
+                  marginLeft: '-15%',
+                  display: this.state.ready ? 'block' : 'none',
+                  transform: 'scaleX(-1)',
+                }}
+              />
+              { !this.state.ready ? <Spinner color={'#F7C06C'} /> : null}
+            </div>
+          </div>
+        </div>
+        <div className="modal-container__footer">
+            {this.state.msg}
+        </div>
+      </div>
+    )
+  }
+}

ui/app/components/modals/qr-scanner/qr-scanner.container.js

@@ -0,0 +1,13 @@
+import { connect } from 'react-redux'
+import QrScanner from './qr-scanner.component'
+
+const { hideModal, qrCodeDetected } = require('../../../actions')
+
+const mapDispatchToProps = dispatch => {
+  return {
+    hideModal: () => dispatch(hideModal()),
+    qrCodeDetected: (data) => dispatch(qrCodeDetected(data)),
+  }
+}
+
+export default connect(null, mapDispatchToProps)(QrScanner)

ui/app/components/qr-scanner/index.js

@@ -1,2 +0,0 @@
-import QrScanner from './qr-scanner.component'
-module.exports = QrScanner

ui/app/components/qr-scanner/qr-scanner.component.js

@@ -1,186 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import {connect} from 'react-redux'
-import { BrowserQRCodeReader } from '@zxing/library'
-import adapter from 'webrtc-adapter' // eslint-disable-line import/no-nodejs-modules, no-unused-vars
-import { hideQrScanner, qrCodeDetected} from '../../actions'
-import Spinner from '../spinner'
-
-class QrScanner extends Component {
-  static propTypes = {
-    visible: PropTypes.bool,
-    hideQrScanner: PropTypes.func,
-    qrCodeDetected: PropTypes.func,
-  }
-  constructor (props) {
-    super(props)
-    this.state = {
-      ready: false,
-      msg: 'Accesing your camera...',
-    }
-    this.scanning = false
-    this.codeReader = null
-  }
-
-  componentDidUpdate () {
-    if (this.props.visible && this.camera && !this.scanning) {
-      this.scanning = true
-      this.initCamera()
-    }
-  }
-
-  initCamera () {
-    console.log('QR-SCANNER: initCamera ')
-    this.codeReader = new BrowserQRCodeReader()
-    this.codeReader.getVideoInputDevices()
-      .then(videoInputDevices => {
-        console.log('QR-SCANNER: getVideoInputDevices ', videoInputDevices)
-        setTimeout(_ => {
-          this.setState({
-            ready: true,
-            msg: 'Place the QR code in front of your camera so we can read it...'})
-            console.log('QR-SCANNER: this.state.ready = true')
-        }, 2000)
-
-        console.log('QR-SCANNER: started scanning...')
-        this.codeReader.decodeFromInputVideoDevice(videoInputDevices[0].deviceId, 'video')
-        .then(content => {
-          console.log('QR-SCANNER: content found!', content)
-          this.codeReader.reset()
-          console.log('QR-SCANNER: stopped scanning...')
-          const result = this.parseContent(content.text)
-          if (result.type !== 'unknown') {
-            console.log('QR-SCANNER: CODE DETECTED', result)
-            this.props.qrCodeDetected(result)
-            this.props.hideQrScanner()
-            this.setState({ ready: false })
-          } else {
-            this.setState({msg: 'Error: We couldn\'t identify that QR code'})
-            console.log('QR-SCANNER: Unknown code')
-          }
-        })
-        .catch(err => {
-          console.log('QR-SCANNER: decodeFromInputVideoDevice threw an exception: ', err)
-        })
-      }).catch(err => {
-        console.log('QR-SCANNER: getVideoInputDevices threw an exception: ', err)
-      })
-  }
-
-  parseContent (content) {
-    let type = 'unknown'
-    let values = {}
-
-    // Here we could add more cases
-    // To parse other codes (transactions for ex.)
-
-    if (content.split('ethereum:').length > 1) {
-      type = 'address'
-      values = {'address': content.split('ethereum:')[1] }
-    }
-    return {type, values}
-  }
-
-
-  stopAndClose = () => {
-    console.log('QR-SCANNER: stopping scanner...')
-    this.codeReader.reset()
-    this.scanning = false
-    this.props.hideQrScanner()
-    this.setState({ ready: false })
-  }
-
-  render () {
-    const { visible } = this.props
-
-    if (!visible) {
-     return null
-    }
-
-    return (
-      <div className={'qr-code-modal-wrapper'}>
-        <div className={'qr-scanner'}
-          style={{
-            position: 'fixed',
-            top: '50%',
-            left: '50%',
-            zIndex: 1050,
-            minWidth: '320px',
-            minHeight: '400px',
-            maxWidth: '300px',
-            maxHeight: '300px',
-            transform: 'translate(-50%, -50%)',
-            backgroundColor: '#ffffff',
-            padding: '15px',
-          }}
-        >
-          <h3 style={{
-            textAlign: 'center',
-            marginBottom: '20px',
-            fontSize: '1.5rem',
-            fontWeight: '500',
-          }}>
-            Scan QR code
-          </h3>
-            <div
-              className={'qr-code-video-wrapper'}
-              style={{
-                overflow: 'hidden',
-                width: '100%',
-                height: '275px',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}>
-              <video
-                id="video"
-                style={{
-                   width: 'auto',
-                   height: '275px',
-                   marginLeft: '-15%',
-                   display: this.state.ready ? 'block' : 'none',
-                   transform: 'scaleX(-1)',
-                }}
-                ref={(cam) => {
-                  this.camera = cam
-                }}
-              />
-             { !this.state.ready ? <Spinner color={'#F7C06C'} /> : null}
-            </div>
-          <div className={'qr-code-help'} style={{textAlign: 'center', fontSize: '12px', padding: '15px'}}>
-            {this.state.msg}
-          </div>
-        </div>
-        <div
-          className={'qr-code-modal-overlay'}
-          style={{
-            position: 'fixed',
-            top: '0',
-            right: '0',
-            bottom: '0',
-            left: '0',
-            zIndex: '1040',
-            backgroundColor: 'rgba(0, 0, 0, 0.5)',
-            animationFillMode: 'forwards',
-            animationDuration: '0.3s',
-            animationName: 'anim_171532470906313',
-            animationTimingFunction: 'ease-out',
-          }}
-          onClick={this.stopAndClose}
-        />
-      </div>
-    )
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    hideQrScanner: () => dispatch(hideQrScanner()),
-    qrCodeDetected: (data) => dispatch(qrCodeDetected(data)),
-  }
-}
-function mapStateToProps (state) {
-  return {}
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(QrScanner)

ui/app/components/send/send.container.js

@@ -28,7 +28,7 @@ import {
   updateSendTokenBalance,
   updateGasData,
   setGasTotal,
-  scanQrCode,
+  showModal,
 } from '../../actions'
 import {
   resetSendState,
@@ -93,7 +93,7 @@ function mapDispatchToProps (dispatch) {
     },
     updateSendErrors: newError => dispatch(updateSendErrors(newError)),
     resetSendState: () => dispatch(resetSendState()),
-    scanQrCode: () => dispatch(scanQrCode()),
+    scanQrCode: () => dispatch(showModal({ name: 'QR_SCANNER' })),
     updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)),
   }
 }

ui/app/reducers/app.js

@@ -50,7 +50,6 @@ function reduceApp (state, action) {
     },
     sidebarOpen: false,
     alertOpen: false,
-    qrScannerOpen: false,
     alertMessage: null,
     qrCodeData: null,
     networkDropdownOpen: false,
@@ -104,17 +103,8 @@ function reduceApp (state, action) {
         alertOpen: false,
         alertMessage: null,
       })
+
     // qr scanner methods
-    case actions.QR_SCANNER_OPEN:
-      return extend(appState, {
-        qrScannerOpen: true,
-      })
-
-    case actions.QR_SCANNER_CLOSE:
-      return extend(appState, {
-        qrScannerOpen: false,
-      })
-
     case actions.QR_CODE_DETECTED:
       return extend(appState, {
         qrCodeData: action.value,