Merge pull request #4897 from MetaMask/qr-code-scan
QR Code Scannerfeature/default_network_editable
Bruno Barbieri
6 years ago
committed by
GitHub
commit
e2be22a4b7
|
After Width: | Height: | Size: 1020 B |
@ -0,0 +1,2 @@ |
|||||||
|
import QrScanner from './qr-scanner.container' |
||||||
|
module.exports = QrScanner |
||||||
@ -0,0 +1,83 @@ |
|||||||
|
.qr-scanner { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background-color: #fff; |
||||||
|
display: flex; |
||||||
|
flex-flow: column; |
||||||
|
border-radius: 8px; |
||||||
|
|
||||||
|
&__title { |
||||||
|
font-size: 1.5rem; |
||||||
|
font-weight: 500; |
||||||
|
padding: 16px 0; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
&__content { |
||||||
|
padding-left: 20px; |
||||||
|
padding-right: 20px; |
||||||
|
|
||||||
|
&__video-wrapper { |
||||||
|
overflow: hidden; |
||||||
|
width: 100%; |
||||||
|
height: 275px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
|
||||||
|
video { |
||||||
|
transform: scaleX(-1); |
||||||
|
width: auto; |
||||||
|
height: 275px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__status { |
||||||
|
text-align: center; |
||||||
|
font-size: 14px; |
||||||
|
padding: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
&__image { |
||||||
|
font-size: 1.5rem; |
||||||
|
font-weight: 500; |
||||||
|
padding: 16px 0 0; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
&__error { |
||||||
|
text-align: center; |
||||||
|
font-size: 16px; |
||||||
|
padding: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
&__footer { |
||||||
|
padding: 20px; |
||||||
|
flex-direction: row; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
button { |
||||||
|
margin-right: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
button:last-of-type { |
||||||
|
margin-right: 0; |
||||||
|
background-color: #009eec; |
||||||
|
border: none; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__close::after { |
||||||
|
content: '\00D7'; |
||||||
|
font-size: 35px; |
||||||
|
color: #9b9b9b; |
||||||
|
position: absolute; |
||||||
|
top: 4px; |
||||||
|
right: 20px; |
||||||
|
cursor: pointer; |
||||||
|
font-weight: 300; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,216 @@ |
|||||||
|
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' |
||||||
|
import WebcamUtils from '../../../../lib/webcam-utils' |
||||||
|
import PageContainerFooter from '../../page-container/page-container-footer/page-container-footer.component' |
||||||
|
|
||||||
|
export default class QrScanner extends Component { |
||||||
|
static propTypes = { |
||||||
|
hideModal: PropTypes.func.isRequired, |
||||||
|
qrCodeDetected: PropTypes.func, |
||||||
|
scanQrCode: PropTypes.func, |
||||||
|
error: PropTypes.bool, |
||||||
|
errorType: PropTypes.string, |
||||||
|
} |
||||||
|
|
||||||
|
static contextTypes = { |
||||||
|
t: PropTypes.func, |
||||||
|
} |
||||||
|
|
||||||
|
constructor (props, context) { |
||||||
|
super(props) |
||||||
|
|
||||||
|
this.state = { |
||||||
|
ready: false, |
||||||
|
msg: context.t('accessingYourCamera'), |
||||||
|
} |
||||||
|
this.codeReader = null |
||||||
|
this.permissionChecker = null |
||||||
|
this.needsToReinit = false |
||||||
|
|
||||||
|
// Clear pre-existing qr code data before scanning
|
||||||
|
this.props.qrCodeDetected(null) |
||||||
|
} |
||||||
|
|
||||||
|
componentDidMount () { |
||||||
|
this.initCamera() |
||||||
|
} |
||||||
|
|
||||||
|
async checkPermisisions () { |
||||||
|
const { permissions } = await WebcamUtils.checkStatus() |
||||||
|
if (permissions) { |
||||||
|
clearTimeout(this.permissionChecker) |
||||||
|
// Let the video stream load first...
|
||||||
|
setTimeout(_ => { |
||||||
|
this.setState({ |
||||||
|
ready: true, |
||||||
|
msg: this.context.t('scanInstructions'), |
||||||
|
}) |
||||||
|
if (this.needsToReinit) { |
||||||
|
this.initCamera() |
||||||
|
this.needsToReinit = false |
||||||
|
} |
||||||
|
}, 2000) |
||||||
|
} else { |
||||||
|
// Keep checking for permissions
|
||||||
|
this.permissionChecker = setTimeout(_ => { |
||||||
|
this.checkPermisisions() |
||||||
|
}, 1000) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
componentWillUnmount () { |
||||||
|
clearTimeout(this.permissionChecker) |
||||||
|
if (this.codeReader) { |
||||||
|
this.codeReader.reset() |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
initCamera () { |
||||||
|
this.codeReader = new BrowserQRCodeReader() |
||||||
|
this.codeReader.getVideoInputDevices() |
||||||
|
.then(videoInputDevices => { |
||||||
|
clearTimeout(this.permissionChecker) |
||||||
|
this.checkPermisisions() |
||||||
|
this.codeReader.decodeFromInputVideoDevice(undefined, 'video') |
||||||
|
.then(content => { |
||||||
|
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 => { |
||||||
|
if (err && err.name === 'NotAllowedError') { |
||||||
|
this.setState({msg: this.context.t('youNeedToAllowCameraAccess')}) |
||||||
|
clearTimeout(this.permissionChecker) |
||||||
|
this.needsToReinit = true |
||||||
|
this.checkPermisisions() |
||||||
|
} |
||||||
|
}) |
||||||
|
}).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 type of links
|
||||||
|
// For ex. EIP-681 (https://eips.ethereum.org/EIPS/eip-681)
|
||||||
|
|
||||||
|
|
||||||
|
// Ethereum address links - fox ex. ethereum:0x.....1111
|
||||||
|
if (content.split('ethereum:').length > 1) { |
||||||
|
|
||||||
|
type = 'address' |
||||||
|
values = {'address': content.split('ethereum:')[1] } |
||||||
|
|
||||||
|
// Regular ethereum addresses - fox ex. 0x.....1111
|
||||||
|
} else if (content.substring(0, 2).toLowerCase() === '0x') { |
||||||
|
|
||||||
|
type = 'address' |
||||||
|
values = {'address': content } |
||||||
|
|
||||||
|
} |
||||||
|
return {type, values} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
stopAndClose = () => { |
||||||
|
if (this.codeReader) { |
||||||
|
this.codeReader.reset() |
||||||
|
} |
||||||
|
this.setState({ ready: false }) |
||||||
|
this.props.hideModal() |
||||||
|
} |
||||||
|
|
||||||
|
tryAgain = () => { |
||||||
|
// close the modal
|
||||||
|
this.stopAndClose() |
||||||
|
// wait for the animation and try again
|
||||||
|
setTimeout(_ => { |
||||||
|
this.props.scanQrCode() |
||||||
|
}, 1000) |
||||||
|
} |
||||||
|
|
||||||
|
renderVideo () { |
||||||
|
return ( |
||||||
|
<div className={'qr-scanner__content__video-wrapper'}> |
||||||
|
<video |
||||||
|
id="video" |
||||||
|
style={{ |
||||||
|
display: this.state.ready ? 'block' : 'none', |
||||||
|
}} |
||||||
|
/> |
||||||
|
{ !this.state.ready ? <Spinner color={'#F7C06C'} /> : null} |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
renderErrorModal () { |
||||||
|
let title, msg |
||||||
|
|
||||||
|
if (this.props.error) { |
||||||
|
if (this.props.errorType === 'NO_WEBCAM_FOUND') { |
||||||
|
title = this.context.t('noWebcamFoundTitle') |
||||||
|
msg = this.context.t('noWebcamFound') |
||||||
|
} else { |
||||||
|
title = this.context.t('unknownCameraErrorTitle') |
||||||
|
msg = this.context.t('unknownCameraError') |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="qr-scanner"> |
||||||
|
<div className="qr-scanner__close" onClick={this.stopAndClose}></div> |
||||||
|
|
||||||
|
<div className="qr-scanner__image"> |
||||||
|
<img src={'images/webcam.svg'} width={70} height={70} /> |
||||||
|
</div> |
||||||
|
<div className="qr-scanner__title"> |
||||||
|
{ title } |
||||||
|
</div> |
||||||
|
<div className={'qr-scanner__error'}> |
||||||
|
{msg} |
||||||
|
</div> |
||||||
|
<PageContainerFooter |
||||||
|
onCancel={this.stopAndClose} |
||||||
|
onSubmit={this.tryAgain} |
||||||
|
cancelText={this.context.t('cancel')} |
||||||
|
submitText={this.context.t('tryAgain')} |
||||||
|
submitButtonType="confirm" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
render () { |
||||||
|
const { t } = this.context |
||||||
|
|
||||||
|
if (this.props.error) { |
||||||
|
return this.renderErrorModal() |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="qr-scanner"> |
||||||
|
<div className="qr-scanner__close" onClick={this.stopAndClose}></div> |
||||||
|
<div className="qr-scanner__title"> |
||||||
|
{ `${t('scanQrCode')}` } |
||||||
|
</div> |
||||||
|
<div className="qr-scanner__content"> |
||||||
|
{ this.renderVideo() } |
||||||
|
</div> |
||||||
|
<div className={'qr-scanner__status'}> |
||||||
|
{this.state.msg} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
import { connect } from 'react-redux' |
||||||
|
import QrScanner from './qr-scanner.component' |
||||||
|
|
||||||
|
const { hideModal, qrCodeDetected, showQrScanner } = require('../../../actions') |
||||||
|
import { |
||||||
|
SEND_ROUTE, |
||||||
|
} from '../../../routes' |
||||||
|
|
||||||
|
const mapStateToProps = state => { |
||||||
|
return { |
||||||
|
error: state.appState.modal.modalState.props.error, |
||||||
|
errorType: state.appState.modal.modalState.props.errorType, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const mapDispatchToProps = dispatch => { |
||||||
|
return { |
||||||
|
hideModal: () => dispatch(hideModal()), |
||||||
|
qrCodeDetected: (data) => dispatch(qrCodeDetected(data)), |
||||||
|
scanQrCode: () => dispatch(showQrScanner(SEND_ROUTE)), |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(QrScanner) |
||||||
@ -0,0 +1,36 @@ |
|||||||
|
'use strict' |
||||||
|
|
||||||
|
import DetectRTC from 'detectrtc' |
||||||
|
const { ENVIRONMENT_TYPE_POPUP } = require('../../app/scripts/lib/enums') |
||||||
|
const { getEnvironmentType, getPlatform } = require('../../app/scripts/lib/util') |
||||||
|
const { PLATFORM_BRAVE, PLATFORM_FIREFOX } = require('../../app/scripts/lib/enums') |
||||||
|
|
||||||
|
class WebcamUtils { |
||||||
|
|
||||||
|
static checkStatus () { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
const isPopup = getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP |
||||||
|
const isFirefoxOrBrave = getPlatform() === (PLATFORM_FIREFOX || PLATFORM_BRAVE) |
||||||
|
try { |
||||||
|
DetectRTC.load(_ => { |
||||||
|
if (DetectRTC.hasWebcam) { |
||||||
|
let environmentReady = true |
||||||
|
if ((isFirefoxOrBrave && isPopup) || (isPopup && !DetectRTC.isWebsiteHasWebcamPermissions)) { |
||||||
|
environmentReady = false |
||||||
|
} |
||||||
|
resolve({ |
||||||
|
permissions: DetectRTC.isWebsiteHasWebcamPermissions, |
||||||
|
environmentReady, |
||||||
|
}) |
||||||
|
} else { |
||||||
|
reject({type: 'NO_WEBCAM_FOUND'}) |
||||||
|
} |
||||||
|
}) |
||||||
|
} catch (e) { |
||||||
|
reject({type: 'UNKNOWN_ERROR'}) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
module.exports = WebcamUtils |
||||||
Loading…
Reference in new issue