diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 8d65bc596..8edf37235 100644 --- a/app/_locales/en/messages.json +++ b/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" }, diff --git a/app/scripts/contentscript.js b/app/scripts/contentscript.js index b7496f318..e0a2b0061 100644 --- a/app/scripts/contentscript.js +++ b/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 } diff --git a/ui/app/actions.js b/ui/app/actions.js index 7608db6dc..0eb47edba 100644 --- a/ui/app/actions.js +++ b/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()) - } -} diff --git a/ui/app/app.js b/ui/app/app.js index 9363d21d1..fa2eed708 100644 --- a/ui/app/app.js +++ b/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 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 ( +
+
+
+ { `${t('scanQrCode')}?` } +
+
+
+
+
+
+
+ {this.state.msg} +
+
+ ) + } +} 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) diff --git a/ui/app/components/qr-scanner/index.js b/ui/app/components/qr-scanner/index.js deleted file mode 100644 index f459f6702..000000000 --- a/ui/app/components/qr-scanner/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import QrScanner from './qr-scanner.component' -module.exports = QrScanner diff --git a/ui/app/components/qr-scanner/qr-scanner.component.js b/ui/app/components/qr-scanner/qr-scanner.component.js deleted file mode 100644 index a0b52495d..000000000 --- a/ui/app/components/qr-scanner/qr-scanner.component.js +++ /dev/null @@ -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 ( -
-
-

- Scan QR code -

-
-
-
- {this.state.msg} -
-
-
-
- ) - } -} - -function mapDispatchToProps (dispatch) { - return { - hideQrScanner: () => dispatch(hideQrScanner()), - qrCodeDetected: (data) => dispatch(qrCodeDetected(data)), - } -} -function mapStateToProps (state) { - return {} -} - -export default connect(mapStateToProps, mapDispatchToProps)(QrScanner) diff --git a/ui/app/components/send/send.container.js b/ui/app/components/send/send.container.js index 67a441a9d..1fb771974 100644 --- a/ui/app/components/send/send.container.js +++ b/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)), } } diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index 9775638a7..fed8b1b95 100644 --- a/ui/app/reducers/app.js +++ b/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,