diff --git a/CHANGELOG.md b/CHANGELOG.md index 453823f88..f83ed86e8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Current Master +- Add a QR button to the Account detail screen ## 2.11.1 2016-09-12 - Fix bug that prevented caches from being cleared in Opera. diff --git a/package.json b/package.json index c75772a34..423bd6a02 100644 --- a/package.json +++ b/package.json @@ -62,6 +62,7 @@ "polyfill-crypto.getrandomvalues": "^1.0.0", "post-message-stream": "^1.0.0", "pumpify": "^1.3.4", + "qrcode-npm": "0.0.3", "react": "^15.0.2", "react-addons-css-transition-group": "^15.0.2", "react-dom": "^15.0.2", diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index ebb15cd05..41d1ff2da 100644 --- a/ui/app/account-detail.js +++ b/ui/app/account-detail.js @@ -136,6 +136,22 @@ AccountDetailScreen.prototype.render = function () { value: ethUtil.toChecksumAddress(selected), }), + h(Tooltip, { + title: 'QR Code', + }, [ + h('i.fa.fa-qrcode.pointer.pop-hover', { + onClick: () => props.dispatch(actions.showQrView(selected, identity ? identity.name : '')), + style: { + fontSize: '18px', + position: 'relative', + color: 'rgb(247, 134, 28)', + top: '5px', + marginLeft: '3px', + marginRight: '3px', + }, + }), + ]), + h(Tooltip, { title: 'Export Private Key', }, [ diff --git a/ui/app/actions.js b/ui/app/actions.js index 57c2bf3e8..289366db0 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -134,7 +134,7 @@ var actions = { hideSubLoadingIndication: hideSubLoadingIndication, // QR STUFF: SHOW_QR: 'SHOW_QR', - getQr: getQr, + showQrView: showQrView, reshowQrCode: reshowQrCode, SHOW_QR_VIEW: 'SHOW_QR_VIEW', // FORGOT PASSWORD: @@ -739,25 +739,18 @@ function coinShiftRquest (data, marketData) { var message = ` Deposit your ${response.depositType} to the address bellow:` _accountManager.createShapeShiftTx(response.deposit, response.depositType) - dispatch(actions.getQr(response.deposit, '125x125', [message].concat(marketData))) + dispatch(actions.showQrView(response.deposit, [message].concat(marketData))) }) } } -function getQr (data, size, message) { - return (dispatch) => { - qrRequest(data, size, (response) => { - dispatch(actions.hideLoadingIndication()) - if (response.error) return dispatch(actions.showWarning(response.error)) - dispatch({ - type: actions.SHOW_QR, - value: { - qr: response, - message: message, - data: data, - }, - }) - }) +function showQrView (data, message) { + return { + type: actions.SHOW_QR_VIEW, + value: { + message: message, + data: data, + }, } } function reshowQrCode (data, coin) { @@ -772,17 +765,8 @@ function reshowQrCode (data, coin) { `Deposit Minimum:${mktResponse.minimum}`, ] - qrRequest(data, '125x125', (response) => { - dispatch(actions.hideLoadingIndication()) - dispatch({ - type: actions.SHOW_QR_VIEW, - value: { - qr: response, - message: message, - data: data, - }, - }) - }) + dispatch(actions.hideLoadingIndication()) + return dispatch(actions.showQrView(data, message)) }) } } @@ -810,15 +794,3 @@ function shapeShiftRequest (query, options, cb) { return shapShiftReq.send() } } - -function qrRequest (data, size, cb) { - var requestListner = function (request) { - cb ? cb(this.responseText) : null - return this.responseText - } - - var qrReq = new XMLHttpRequest() - qrReq.addEventListener('load', requestListner) - qrReq.open('GET', `https://api.qrserver.com/v1/create-qr-code/?size=${size}&format=svg&data=${data}`, true) - qrReq.send() -} diff --git a/ui/app/app.js b/ui/app/app.js index 2e05f0038..8b1cac03f 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -478,7 +478,6 @@ App.prototype.renderPrimary = function () { h('div', { style: { position: 'absolute', - bottom: '115px', left: '44px', width: '285px', }, diff --git a/ui/app/components/qr-code.js b/ui/app/components/qr-code.js index c26b02b94..5488599eb 100644 --- a/ui/app/components/qr-code.js +++ b/ui/app/components/qr-code.js @@ -1,5 +1,6 @@ const Component = require('react').Component const h = require('react-hyperscript') +const qrCode = require('qrcode-npm').qrcode const inherits = require('util').inherits const connect = require('react-redux').connect const CopyButton = require('./copyButton') @@ -23,15 +24,22 @@ function QrCodeView () { QrCodeView.prototype.render = function () { var props = this.props var Qr = props.Qr + var qrImage = qrCode(4, 'M') + + qrImage.addData(Qr.data) + qrImage.make() + return h('.main-container.flex-column', { key: 'qr', style: { justifyContent: 'center', - padding: '45px', + paddingBottom: '45px', + paddingLeft: '45px', + paddingRight: '45px', alignItems: 'center', }, }, [ - Array.isArray(Qr.message) ? h('.message-container', this.renderMultiMessage()) : h('h3', Qr.message), + Array.isArray(Qr.message) ? h('.message-container', this.renderMultiMessage()) : h('.qr-header', Qr.message), this.props.warning ? this.props.warning && h('span.error.flex-center', { style: { @@ -48,7 +56,7 @@ QrCodeView.prototype.render = function () { marginBottom: '15px', }, dangerouslySetInnerHTML: { - __html: Qr.image, + __html: qrImage.createTableTag(4), }, }), h('.flex-row', [ diff --git a/ui/app/css/index.css b/ui/app/css/index.css index e2be0abd9..ba90aa551 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -583,12 +583,18 @@ input.large-input { margin-left: 5px; } +.qr-header { + font-size: 25px; + margin-top: 40px; +} + .qr-message { font-size: 12px; color: #F7861C; } div.message-container > div:first-child { + margin-top: 18px; font-size: 15px; color: #4D4D4D; } diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index c39d89a4d..8eb6ec4d4 100644 --- a/ui/app/reducers/app.js +++ b/ui/app/reducers/app.js @@ -495,9 +495,9 @@ function reduceApp (state, action) { return extend(appState, { qrRequested: true, transForward: true, + Qr: { message: action.value.message, - image: action.value.qr, data: action.value.data, }, }) @@ -511,7 +511,6 @@ function reduceApp (state, action) { transForward: true, Qr: { message: action.value.message, - image: action.value.qr, data: action.value.data, }, })