aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorbrunobar79 <brunobar79@gmail.com>2018-07-31 05:50:05 +0800
committerbrunobar79 <brunobar79@gmail.com>2018-07-31 05:50:05 +0800
commit4339f04e80be74dd318e03f75fcf3410e923d30d (patch)
treefbff60758e9dc24a4c11588d7778c92d5f71c7ff
parentb6592ba95f39431d585e8ad19d66364d48c8add3 (diff)
downloadtangerine-wallet-browser-4339f04e80be74dd318e03f75fcf3410e923d30d.tar.gz
tangerine-wallet-browser-4339f04e80be74dd318e03f75fcf3410e923d30d.tar.zst
tangerine-wallet-browser-4339f04e80be74dd318e03f75fcf3410e923d30d.zip
use existing modals
-rw-r--r--app/_locales/en/messages.json12
-rw-r--r--app/scripts/contentscript.js2
-rw-r--r--ui/app/actions.js24
-rw-r--r--ui/app/app.js9
-rw-r--r--ui/app/components/modals/modal.js13
-rw-r--r--ui/app/components/modals/qr-scanner/index.js2
-rw-r--r--ui/app/components/modals/qr-scanner/qr-scanner.component.js133
-rw-r--r--ui/app/components/modals/qr-scanner/qr-scanner.container.js13
-rw-r--r--ui/app/components/qr-scanner/index.js2
-rw-r--r--ui/app/components/qr-scanner/qr-scanner.component.js186
-rw-r--r--ui/app/components/send/send.container.js4
-rw-r--r--ui/app/reducers/app.js12
12 files changed, 177 insertions, 235 deletions
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 (
+ <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)
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 (
- <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)
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,
- })
+ // qr scanner methods
case actions.QR_CODE_DETECTED:
return extend(appState, {
qrCodeData: action.value,