use existing modals

4 files changed, 161 insertions, 0 deletions

diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index f59825ed1..5dda50e52 100644
--- a/ui/app/components/modals/modal.js
+++ b/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: [],
diff --git a/ui/app/components/modals/qr-scanner/index.js b/ui/app/components/modals/qr-scanner/index.js
new file mode 100644
index 000000000..470dee1f4
--- /dev/null
+++ b/ui/app/components/modals/qr-scanner/index.js
@@ -0,0 +1,2 @@
+import QrScanner from './qr-scanner.container'
+module.exports = QrScanner
diff --git a/ui/app/components/modals/qr-scanner/qr-scanner.component.js b/ui/app/components/modals/qr-scanner/qr-scanner.component.js
new file mode 100644
index 000000000..0e7709332
--- /dev/null
+++ b/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>
+    )
+  }
+}
diff --git a/ui/app/components/modals/qr-scanner/qr-scanner.container.js b/ui/app/components/modals/qr-scanner/qr-scanner.container.js
new file mode 100644
index 000000000..198d5ff81
--- /dev/null
+++ b/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)