added qr code scanner icon in send transaction

10 files changed, 29 insertions, 20 deletions

diff --git a/app/scripts/contentscript.js b/app/scripts/contentscript.js
index 87f7c63ef..83ed85a1a 100644
--- a/app/scripts/contentscript.js
+++ b/app/scripts/contentscript.js
@@ -205,7 +205,7 @@ function initQrCodeScanner () {
   // Append preview div
   const preview = document.createElement('div')
   preview.id = 'metamask-preview-wrapper'
-  preview.style = 'position:absolute; top: 20px; left: 20px; width: 300px; height: 300px; overflow: hidden; z-index: 999999999;'
+  preview.style = 'position:fixed; top: 20px; left: 20px; width: 300px; height: 300px; overflow: hidden; z-index: 999999999;'
   const previewVideo = document.createElement('video')
   previewVideo.id = 'metamask-preview-video'
   previewVideo.style = 'width: 100%; height: 100%; object-fit: none; margin-left: -10%; margin-top: 10%;'
@@ -218,14 +218,11 @@ function initQrCodeScanner () {
     continuous: true,
   })
   scanner.addListener('scan', function (content) {
-    console.log('QR-SCANNER: got code (IN-PAGE)', content)
     scanner.stop().then(_ => {
-      console.log('QR-SCANNER: stopped scanner and sending msg (IN-PAGE)', content)
       extension.runtime.sendMessage({
         action: 'qr-code-scanner-data',
         data: content,
       })
-      console.log('QR-SCANNER: message sent (IN-PAGE)', content)
       document.getElementById('metamask-preview-wrapper').parentElement.removeChild(document.getElementById('metamask-preview-wrapper'))
     })
   })
@@ -241,8 +238,6 @@ function initQrCodeScanner () {
 }
 
 extension.runtime.onMessage.addListener(({ action }) => {
-  console.log('QR-SCANNER: message received (IN-PAGE)', action)
   initQrCodeScanner()
 })
-console.log('QR-SCANNER: now listening (IN-PAGE)')
 
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index 62d707432..f67d4edf8 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -660,20 +660,15 @@ module.exports = class MetamaskController extends EventEmitter {
 
   scanQrCode () {
     return new Promise((resolve, reject) => {
-      console.log('QR-SCANNER: intializing QR code scanner feature (MM controller)')
       // Tell contentscript to inject the QR reader
-      this.platform.sendMessage('qr-code-scanner-init')
-      console.log('QR-SCANNER: message to initialize has been sent (MM controller)')
+      this.platform.sendMessageToActiveTab('qr-code-scanner-init')
       // Wait for the scanner to send something back
       this.platform.addMessageListener(({ action, data }) => {
-        console.log('QR-SCANNER: message received (MM controller)', action, data)
         if (action && action === 'qr-code-scanner-data') {
           const normalizedAddress = data.replace('ethereum:', '')
-          console.log('QR-SCANNER: resolving promise!', normalizedAddress)
-          return Promise.resolve(normalizedAddress)
+          resolve(normalizedAddress)
         }
       })
-      console.log('QR-SCANNER: now listening (MM controller)')
     })
   }
 
diff --git a/app/scripts/platforms/extension.js b/app/scripts/platforms/extension.js
index 182df23b1..1cab0bedd 100644
--- a/app/scripts/platforms/extension.js
+++ b/app/scripts/platforms/extension.js
@@ -36,11 +36,10 @@ class ExtensionPlatform {
     extension.runtime.onMessage.addListener(cb)
   }
 
-  sendMessage (message, query = {}) {
+  sendMessageToActiveTab (message, query = {}) {
     extension.tabs.query(query, tabs => {
       const activeTab = tabs.filter(tab => tab.active)[0]
       extension.tabs.sendMessage(activeTab.id, message)
-      console.log('QR-SCANNER: message sent to tab', message, activeTab)
     })
   }
 }
diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js
index b9f99b3d1..cfdf663a5 100644
--- a/ui/app/components/ens-input.js
+++ b/ui/app/components/ens-input.js
@@ -54,6 +54,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' },
diff --git a/ui/app/components/send/send-content/send-content.component.js b/ui/app/components/send/send-content/send-content.component.js
index 566ee1c7f..60f97ab32 100644
--- a/ui/app/components/send/send-content/send-content.component.js
+++ b/ui/app/components/send/send-content/send-content.component.js
@@ -19,8 +19,10 @@ export default class SendContent extends Component {
       <PageContainerContent>
         <div className="send-v2__form">
           <SendFromRow />
-          <SendToRow updateGas={(updateData) => this.props.updateGas(updateData)} />
-          <button onClick={_ => this.props.scanQrCode() }>or scan a QR code</button>
+          <SendToRow
+            updateGas={(updateData) => this.props.updateGas(updateData)} 
+            scanQrCode={ _ => this.props.scanQrCode()}
+          />
           <SendAmountRow updateGas={(updateData) => this.props.updateGas(updateData)} />
           <SendGasRow />
           <SendHexDataRow />
diff --git a/ui/app/components/send/send-content/send-to-row/send-to-row.component.js b/ui/app/components/send/send-content/send-to-row/send-to-row.component.js
index 892ad5d67..321d1cfac 100644
--- a/ui/app/components/send/send-content/send-to-row/send-to-row.component.js
+++ b/ui/app/components/send/send-content/send-to-row/send-to-row.component.js
@@ -51,6 +51,7 @@ export default class SendToRow extends Component {
         showError={inError}
       >
         <EnsInput
+          scanQrCode={_ => this.props.scanQrCode()}
           accounts={toAccounts}
           closeDropdown={() => closeToDropdown()}
           dropdownOpen={toDropdownOpen}
diff --git a/ui/app/components/send/send.component.js b/ui/app/components/send/send.component.js
index 5e967251d..6c439cd21 100644
--- a/ui/app/components/send/send.component.js
+++ b/ui/app/components/send/send.component.js
@@ -47,7 +47,7 @@ export default class SendTransactionScreen extends PersistentForm {
 
   scanQrCode = async () => {
     const scannedAddress = await this.props.scanQrCode()
-    console.log('QR-SCANNER: Got address (UI)', scannedAddress)
+    this.props.updateSendTo(scannedAddress)
     this.updateGas({ to: scannedAddress })
   }
 
diff --git a/ui/app/components/send/send.container.js b/ui/app/components/send/send.container.js
index c3240be67..417941601 100644
--- a/ui/app/components/send/send.container.js
+++ b/ui/app/components/send/send.container.js
@@ -23,6 +23,7 @@ import {
   getTokenBalance,
 } from './send.selectors'
 import {
+  updateSendTo,
   updateSendTokenBalance,
   updateGasData,
   setGasTotal,
@@ -91,5 +92,6 @@ function mapDispatchToProps (dispatch) {
     updateSendErrors: newError => dispatch(updateSendErrors(newError)),
     resetSendState: () => dispatch(resetSendState()),
     scanQrCode: () => dispatch(scanQrCode()),
+    updateSendTo: (to, nickname) => dispatch(updateSendTo(to, nickname)),
   }
 }
diff --git a/ui/app/components/send/to-autocomplete/to-autocomplete.js b/ui/app/components/send/to-autocomplete/to-autocomplete.js
index 80cfa7a85..2b8923dd1 100644
--- a/ui/app/components/send/to-autocomplete/to-autocomplete.js
+++ b/ui/app/components/send/to-autocomplete/to-autocomplete.js
@@ -94,11 +94,12 @@ ToAutoComplete.prototype.render = function () {
     dropdownOpen,
     onChange,
     inError,
+    qrScanner,
   } = this.props
 
   return h('div.send-v2__to-autocomplete', {}, [
 
-    h('input.send-v2__to-autocomplete__input', {
+    h(`input.send-v2__to-autocomplete__input${qrScanner?'.with-qr':''}`, {
       placeholder: this.context.t('recipientAddress'),
       className: inError ? `send-v2__error-border` : '',
       value: to,
@@ -108,7 +109,10 @@ ToAutoComplete.prototype.render = function () {
         borderColor: inError ? 'red' : null,
       },
     }),
-
+    qrScanner && h(`i.fa.fa-qrcode.fa-lg.send-v2__to-autocomplete__qr-code`, {
+      style: { color: '#33333' },
+      onClick: () => this.props.scanQrCode(),
+    }),
     !to && h(`i.fa.fa-caret-down.fa-lg.send-v2__to-autocomplete__down-caret`, {
       style: { color: '#dedede' },
       onClick: () => this.handleInputEvent(),
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index e9c872ea7..e9f22a14e 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -626,6 +626,16 @@
       top: 18px;
       right: 12px;
     }
+
+    &__qr-code {
+      position: absolute;
+      top: 21px;
+      left: 13px;
+    }
+
+    &__input.with-qr {
+      padding-left: 40px;
+    }
   }
 
   &__to-autocomplete, &__memo-text-area, &__hex-data {