QR Code Scanner

app/_locales/en/messages.json

@@ -2,6 +2,9 @@
   "accept": {
     "message": "Accept"
   },
+  "accessingYourCamera": {
+    "message": "Accesing your camera..."
+  },
   "account": {
     "message": "Account"
   },
@@ -653,6 +656,12 @@
   "notStarted": {
     "message": "Not Started"
   },
+  "noWebcamFoundTitle": {
+    "message": "Webcam not found"
+  },
+  "noWebcamFound": {
+    "message": "Your computer's webcam was not found. Please try again."
+  },
   "oldUI": {
     "message": "Old UI"
   },
@@ -937,6 +946,12 @@
   "info": {
   "message": "Info"
   },
+  "scanInstructions": {
+    "message": "Place the QR code in front of your camera"
+  },
+  "scanQrCode": {
+    "message": "Scan QR Code"
+  },
   "shapeshiftBuy": {
     "message": "Buy with Shapeshift"
   },
@@ -1086,6 +1101,15 @@
   "unknownNetworkId": {
     "message": "Unknown network ID"
   },
+  "unknownQrCode": {
+    "message": "Error: We couldn't identify that QR code"
+  },
+  "unknownCameraErrorTitle": {
+    "message": "Ooops! Something went wrong...."
+  },
+  "unknownCameraError": {
+    "message": "There was an error while trying to access you camera. Please try again..."
+  },
   "unlock": {
     "message": "Unlock"
   },
@@ -1132,6 +1156,9 @@
   "whatsThis": {
     "message": "What's this?"
   },
+  "youNeedToAllowCameraAccess": {
+    "message": "You need to allow camera access to use this feature."
+  },
   "yourSigRequested": {
     "message": "Your signature is being requested"
   },

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
 }

app/scripts/platforms/extension.js

@@ -24,8 +24,13 @@ class ExtensionPlatform {
     return extension.runtime.getManifest().version
   }
 
-  openExtensionInBrowser (route = null) {
+  openExtensionInBrowser (route = null, queryString = null) {
     let extensionURL = extension.runtime.getURL('home.html')
+
+    if (queryString) {
+      extensionURL += `?${queryString}`
+    }
+
     if (route) {
       extensionURL += `#${route}`
     }

old-ui/app/components/transaction-list-item.js

@@ -40,7 +40,7 @@ TransactionListItem.prototype.showRetryButton = function () {
   const currentNonce = txParams.nonce
   const currentNonceTxs = transactions.filter(tx => tx.txParams.nonce === currentNonce)
   const currentNonceSubmittedTxs = currentNonceTxs.filter(tx => tx.status === 'submitted')
-  const currentSubmittedTxs = transactions.filter(tx => tx.status === 'submitted')  
+  const currentSubmittedTxs = transactions.filter(tx => tx.status === 'submitted')
   const lastSubmittedTxWithCurrentNonce = currentNonceSubmittedTxs[0]
   const currentTxIsLatestWithNonce = lastSubmittedTxWithCurrentNonce &&
     lastSubmittedTxWithCurrentNonce.id === transaction.id

package.json

@@ -75,6 +75,7 @@
   },
   "dependencies": {
     "@material-ui/core": "^1.0.0",
+    "@zxing/library": "^0.7.0",
     "abi-decoder": "^1.0.9",
     "asmcrypto.js": "0.22.0",
     "async": "^2.5.0",
@@ -97,6 +98,7 @@
     "debounce-stream": "^2.0.0",
     "deep-extend": "^0.5.1",
     "detect-node": "^2.0.3",
+    "detectrtc": "^1.3.6",
     "disc": "^1.3.2",
     "dnode": "^1.2.2",
     "end-of-stream": "^1.1.0",
@@ -207,6 +209,7 @@
     "web3": "^0.20.1",
     "web3-provider-engine": "^14.0.5",
     "web3-stream-provider": "^3.0.1",
+    "webrtc-adapter": "^6.3.0",
     "xtend": "^4.0.1"
   },
   "devDependencies": {

ui/app/actions.js

@@ -12,6 +12,7 @@ const { fetchLocale } = require('../i18n-helper')
 const log = require('loglevel')
 const { ENVIRONMENT_TYPE_NOTIFICATION } = require('../../app/scripts/lib/enums')
 const { hasUnconfirmedTransactions } = require('./helpers/confirm-transaction/util')
+const WebcamUtils = require('../lib/webcam-utils')
 
 var actions = {
   _setBackgroundConnection: _setBackgroundConnection,
@@ -33,6 +34,8 @@ var actions = {
   ALERT_CLOSE: 'UI_ALERT_CLOSE',
   showAlert: showAlert,
   hideAlert: hideAlert,
+  QR_CODE_DETECTED: 'UI_QR_CODE_DETECTED',
+  qrCodeDetected,
   // network dropdown open
   NETWORK_DROPDOWN_OPEN: 'UI_NETWORK_DROPDOWN_OPEN',
   NETWORK_DROPDOWN_CLOSE: 'UI_NETWORK_DROPDOWN_CLOSE',
@@ -125,7 +128,8 @@ var actions = {
   SHOW_CONF_TX_PAGE: 'SHOW_CONF_TX_PAGE',
   SHOW_CONF_MSG_PAGE: 'SHOW_CONF_MSG_PAGE',
   SET_CURRENT_FIAT: 'SET_CURRENT_FIAT',
-  setCurrentCurrency: setCurrentCurrency,
+  showQrScanner,
+  setCurrentCurrency,
   setCurrentAccountTab,
   // account detail screen
   SHOW_SEND_PAGE: 'SHOW_SEND_PAGE',
@@ -721,6 +725,28 @@ function showInfoPage () {
   }
 }
 
+function showQrScanner (ROUTE) {
+  return (dispatch, getState) => {
+    return WebcamUtils.checkStatus()
+    .then(status => {
+      if (!status.environmentReady) {
+         // We need to switch to fullscreen mode to ask for permission
+         global.platform.openExtensionInBrowser(`${ROUTE}`, `scan=true`)
+      } else {
+        dispatch(actions.showModal({
+          name: 'QR_SCANNER',
+        }))
+      }
+    }).catch(e => {
+      dispatch(actions.showModal({
+        name: 'QR_SCANNER',
+        error: true,
+        errorType: e.type,
+      }))
+    })
+  }
+}
+
 function setCurrentCurrency (currencyCode) {
   return (dispatch) => {
     dispatch(actions.showLoadingIndication())
@@ -1806,6 +1832,12 @@ function hideAlert () {
   }
 }
 
+function qrCodeDetected (qrCodeData) {
+  return {
+    type: actions.QR_CODE_DETECTED,
+    value: qrCodeData,
+  }
+}
 
 function showLoadingIndication (message) {
   return {

ui/app/components/ens-input.js

@@ -27,6 +27,7 @@ function EnsInput () {
 }
 
 EnsInput.prototype.onChange = function (recipient) {
+
   const network = this.props.network
   const networkHasEnsSupport = getNetworkEnsSupport(network)
 
@@ -54,6 +55,7 @@ EnsInput.prototype.render = function () {
   const opts = extend(props, {
     list: 'addresses',
     onChange: this.onChange.bind(this),
+    qrScanner: true,
   })
   return h('div', {
     style: { width: '100%', position: 'relative' },

ui/app/components/modals/index.scss

@@ -1,5 +1,7 @@
 @import './customize-gas/index';
 
+@import './qr-scanner/index';
+
 .modal-container {
   width: 100%;
   height: 100%;

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: [],

ui/app/components/modals/qr-scanner/index.js

@@ -0,0 +1,2 @@
+import QrScanner from './qr-scanner.container'
+module.exports = QrScanner