aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--CHANGELOG.md1
-rw-r--r--package.json1
-rw-r--r--ui/app/account-detail.js16
-rw-r--r--ui/app/actions.js50
-rw-r--r--ui/app/app.js1
-rw-r--r--ui/app/components/qr-code.js14
-rw-r--r--ui/app/css/index.css6
-rw-r--r--ui/app/reducers/app.js3
8 files changed, 47 insertions, 45 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md
index f20d8323e..862bf3d7e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
- Fixed bug where opening MetaMask could close a non-metamask popup.
- Fixed memory leak that caused occasional crashes.
+- 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
@@ -137,6 +137,22 @@ AccountDetailScreen.prototype.render = function () {
}),
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',
}, [
h('div', {
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,
},
})
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-27 15:34:50 +0800