diff options
-rw-r--r-- | app/scripts/contentscript.js | 7 | ||||
-rw-r--r-- | app/scripts/metamask-controller.js | 9 | ||||
-rw-r--r-- | app/scripts/platforms/extension.js | 3 | ||||
-rw-r--r-- | ui/app/components/ens-input.js | 1 | ||||
-rw-r--r-- | ui/app/components/send/send-content/send-content.component.js | 6 | ||||
-rw-r--r-- | ui/app/components/send/send-content/send-to-row/send-to-row.component.js | 1 | ||||
-rw-r--r-- | ui/app/components/send/send.component.js | 2 | ||||
-rw-r--r-- | ui/app/components/send/send.container.js | 2 | ||||
-rw-r--r-- | ui/app/components/send/to-autocomplete/to-autocomplete.js | 8 | ||||
-rw-r--r-- | ui/app/css/itcss/components/send.scss | 10 |
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 { |