Merge pull request #648 from MetaMask/qrCode

Put qr button back in account detail screen...

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.

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",

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',
                 }, [

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) {
+function showQrView (data, message) {
-  return (dispatch) => {
+  return {
-    qrRequest(data, size, (response) => {
+    type: actions.SHOW_QR_VIEW,
-      dispatch(actions.hideLoadingIndication())
+    value: {
-      if (response.error) return dispatch(actions.showWarning(response.error))
+      message: message,
-      dispatch({
+      data: data,
-        type: actions.SHOW_QR,
+    },
-        value: {
-          qr: response,
-          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(actions.hideLoadingIndication())
+      return dispatch(actions.showQrView(data, message))
-        dispatch({
-          type: actions.SHOW_QR_VIEW,
-          value: {
-            qr: response,
-            message: message,
-            data: data,
-          },
-        })
-      })
     })
   }
 }
@@ -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()
-}

ui/app/app.js

@@ -478,7 +478,6 @@ App.prototype.renderPrimary = function () {
         h('div', {
           style: {
             position: 'absolute',
-            bottom: '115px',
             left: '44px',
             width: '285px',
           },

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', [

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;
 }

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,
         },
       })