From 218f380d874f0efef4b87803c3f9cbd508391a9e Mon Sep 17 00:00:00 2001
From: Frankie <frankie.pangilinan@consensys.net>
Date: Mon, 12 Sep 2016 17:27:14 -0700
Subject: Add qrcode-npm to package.json and swap out Qr Code generator api for
node-module
---
package.json | 1 +
ui/app/account-detail.js | 16 ++++++++++++++
ui/app/actions.js | 50 ++++++++++----------------------------------
ui/app/app.js | 1 -
ui/app/components/qr-code.js | 14 ++++++++++---
ui/app/css/index.css | 6 ++++++
ui/app/reducers/app.js | 5 +++--
7 files changed, 48 insertions(+), 45 deletions(-)
diff --git a/package.json b/package.json
index 1fc9a5f7d..dddecc5cf 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,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 a6cd9ca1b..0d83fbdba 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -496,9 +496,10 @@ function reduceApp (state, action) {
return extend(appState, {
qrRequested: true,
transForward: true,
+
Qr: {
message: action.value.message,
- image: action.value.qr,
+ // image: action.value.qr,
data: action.value.data,
},
})
@@ -512,7 +513,7 @@ function reduceApp (state, action) {
transForward: true,
Qr: {
message: action.value.message,
- image: action.value.qr,
+ // image: action.value.qr,
data: action.value.data,
},
})
--
cgit
From 09bd35ac7a155e1facd1fc9da3645d23b568641f Mon Sep 17 00:00:00 2001
From: Frankie <frankie.pangilinan@consensys.net>
Date: Mon, 12 Sep 2016 17:29:54 -0700
Subject: Add to CHANGELOG.md
---
CHANGELOG.md | 1 +
1 file changed, 1 insertion(+)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9d89c2438..1b7d8b632 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
## Current Master
+- Add a QR button to the Account detail screen
- Fix bug where pending transactions from Test net (or other networks) show up In Main net.
- Add fiat conversion values to more views.
- On fresh install, open a new tab with the MetaMask Introduction video. Does not open on update.
--
cgit
From 4aa5114019870ea6606d98ee9bf5092b45ed9fc5 Mon Sep 17 00:00:00 2001
From: Frankie <frankie.pangilinan@consensys.net>
Date: Mon, 12 Sep 2016 17:32:49 -0700
Subject: Remove unused code in qr actions
---
ui/app/reducers/app.js | 2 --
1 file changed, 2 deletions(-)
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index 0d83fbdba..2173eff3d 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -499,7 +499,6 @@ function reduceApp (state, action) {
Qr: {
message: action.value.message,
- // image: action.value.qr,
data: action.value.data,
},
})
@@ -513,7 +512,6 @@ function reduceApp (state, action) {
transForward: true,
Qr: {
message: action.value.message,
- // image: action.value.qr,
data: action.value.data,
},
})
--
cgit