aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorbrunobar79 <brunobar79@gmail.com>2018-07-24 10:10:57 +0800
committerbrunobar79 <brunobar79@gmail.com>2018-07-24 10:10:57 +0800
commitd5929e5c42e230fc0a52337f86b5850e68516563 (patch)
tree12514016dd7e0612b9ad724637e8a855b3ac0f46
parentf7ad978474f42eb96f4f6c79376391504cf228c1 (diff)
downloadtangerine-wallet-browser-d5929e5c42e230fc0a52337f86b5850e68516563.tar.gz
tangerine-wallet-browser-d5929e5c42e230fc0a52337f86b5850e68516563.tar.zst
tangerine-wallet-browser-d5929e5c42e230fc0a52337f86b5850e68516563.zip
added qr code scanner icon in send transaction
-rw-r--r--app/scripts/contentscript.js7
-rw-r--r--app/scripts/metamask-controller.js9
-rw-r--r--app/scripts/platforms/extension.js3
-rw-r--r--ui/app/components/ens-input.js1
-rw-r--r--ui/app/components/send/send-content/send-content.component.js6
-rw-r--r--ui/app/components/send/send-content/send-to-row/send-to-row.component.js1
-rw-r--r--ui/app/components/send/send.component.js2
-rw-r--r--ui/app/components/send/send.container.js2
-rw-r--r--ui/app/components/send/to-autocomplete/to-autocomplete.js8
-rw-r--r--ui/app/css/itcss/components/send.scss10
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 {