diff options
Diffstat (limited to 'ui/app/components/modals/qr-scanner/qr-scanner.component.js')
| -rw-r--r-- | ui/app/components/modals/qr-scanner/qr-scanner.component.js | 216 |
1 files changed, 0 insertions, 216 deletions
diff --git a/ui/app/components/modals/qr-scanner/qr-scanner.component.js b/ui/app/components/modals/qr-scanner/qr-scanner.component.js deleted file mode 100644 index cb8d07d83..000000000 --- a/ui/app/components/modals/qr-scanner/qr-scanner.component.js +++ /dev/null @@ -1,216 +0,0 @@ -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> - ) - } -} |