QR Code feature

react/package.json

@@ -38,10 +38,12 @@
     "bluebird": "^3.5.0",
     "express": "^4.14.0",
     "file-loader": "^0.10.0",
+    "qrcode.react": "^0.7.1",
     "rc-tree": "^1.4.6",
     "react": "^15.3.1",
     "react-dom": "^15.3.1",
     "react-hot-loader": "^1.3.0",
+    "react-qr-reader": "^1.1.3",
     "react-redux": "^5.0.3",
     "react-router": "^3.0.2",
     "react-router-redux": "^4.0.4",

react/src/components/dashboard/qrModal/qrModal.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import Store from '../../../store';
+import { translate } from '../../../translate/translate';
+import QrReader from 'react-qr-reader'
+import {
+  QRModalRender,
+  QRModalReaderRender
+} from './qrModal.render';
+
+class QRModal extends React.Component {
+ constructor(props) {
+    super(props);
+
+    this.state = {
+      modalIsOpen: false,
+      error: ""
+    };
+
+    this.openModal = this.openModal.bind(this);
+    this.closeModal = this.closeModal.bind(this);
+
+    this.handleScan = this.handleScan.bind(this);
+    this.handleError = this.handleError.bind(this);
+    
+    document.body.addEventListener('click', this.closeModal);
+
+    }
+  
+  handleScan(data){
+    if(data!==null) {
+       if(this.props.mode==="scan") {
+        this.props.setRecieverFromScan(data)
+       }
+      this.closeModal();
+    }
+    return data;
+  }
+  handleError(err){
+    this.setState({error: err});
+  }
+  openModal() {
+    this.setState({modalIsOpen: true});
+    if(this.props.mode==="scan") {
+        ReactDOM.render(<QrReader
+                    delay={500}
+                    style={{ height: 281, width: 500, }}
+                    onError={this.handleError}
+                    onScan={this.handleScan}
+                    />, document.getElementById('webcam'));
+    }
+  }
+  closeModal() {
+    this.setState({modalIsOpen: false});
+    if(this.props.mode==="scan") {
+      ReactDOM.unmountComponentAtNode(document.getElementById('webcam'));
+    }
+  }
+  render() {
+    if(this.props.mode==="scan") {
+        return QRModalReaderRender.call(this);
+    } else {
+        return QRModalRender.call(this);
+    }
+  
+   
+  }
+}
+
+export default QRModal;

react/src/components/dashboard/qrModal/qrModal.render.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import { translate } from '../../../translate/translate';
+import QRCode from 'qrcode.react';
+
+export const QRModalRender = function () {
+     return (
+     <span>
+      <span
+        className="label label-default margin-left-10 action"
+        title={ translate('INDEX.QRCODE') }
+        onClick={this.openModal}>
+        <i className="icon fa-qrcode" aria-hidden="true"></i>
+      </span>
+      <div
+        className={ 'modal modal-3d-sign ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }
+        id="QRModal"
+        aria-hidden="true"
+        aria-labelledby="QRModal"
+        role="dialog"
+        tabIndex="-1">
+        <div className="modal-dialog modal-center modal-sm">
+          <div className="modal-content">
+            <div className="modal-header bg-orange-a400 wallet-send-header">
+              <button
+                type="button"
+                className="close white"
+                aria-label="Close"
+                onClick={ this.closeModal }>
+                <span aria-hidden="true">×</span>
+              </button>
+              <h4 className="modal-title white text-left">{ translate('INDEX.SCAN_QR_CODE') }</h4>
+            </div>
+            <div className="modal-body">
+             <div className="animsition vertical-align fade-in">
+                  <div className="page-content vertical-align-middle">
+                          <QRCode 
+                            value={this.props.content}
+                            size={198}
+                          />
+                  </div>
+              </div>
+            </div>
+          </div>
+        </div>
+    </div>
+   <div className={ 'modal-backdrop ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }></div>
+  </span>
+  );
+};
+
+
+export const QRModalReaderRender = function () {
+     return (
+     <span>
+      <button type="button"
+        className="btn btn-default"
+        onClick={this.openModal}>
+        <i className="icon fa-qrcode" aria-hidden="true"></i>
+        { translate('INDEX.SCAN_QRCODE_WEBCAM') }
+      </button>
+      <div
+        className={ 'modal modal-3d-sign ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }
+        id="QRReadModal"
+        aria-hidden="true"
+        aria-labelledby="QRReadModal"
+        role="dialog"
+        tabIndex="-1">
+        <div className="modal-dialog modal-center modal-md">
+          <div className="modal-content">
+            <div className="modal-header bg-orange-a400 wallet-send-header">
+              <button
+                type="button"
+                className="close white"
+                aria-label="Close"
+                onClick={ this.closeModal }>
+                <span aria-hidden="true">×</span>
+              </button>
+              <h4 className="modal-title white text-left">{ translate('INDEX.SCAN_QRCODE_WEBCAM') }</h4>
+            </div>
+            <div className="modal-body">
+             <div className="animsition vertical-align fade-in">
+                  <div className="page-content vertical-align-middle">
+                    <div id="webcam">
+                      {this.state.error}
+                    </div>
+                  </div>
+              </div>
+            </div>
+          </div>
+        </div>
+    </div>
+   <div className={ 'modal-backdrop ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }></div>
+  </span>
+  );
+};
+
+

react/src/components/dashboard/receiveCoin/receiveCoin.render.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { translate } from '../../../translate/translate';
+import QRModal from '../qrModal/qrModal';
 
 export const AddressActionsBasiliskModeRender = function(address) {
   return (
@@ -25,6 +26,9 @@ export const AddressActionsBasiliskModeRender = function(address) {
         onClick={ () => this._validateAddressBasilisk(address) }>
           <i className="icon fa-info-circle"></i>
       </span>
+      <QRModal
+        content={address}
+      />
     </td>
   );
 };
@@ -41,6 +45,9 @@ export const AddressActionsNonBasiliskModeRender = function(address, type) {
         onClick={ () => this._copyCoinAddress(address) }>
           <i className="icon wb-copy"></i> { translate('INDEX.COPY') }
       </button>
+      <QRModal
+        content={address}
+      />
     </td>
   );
 };
@@ -140,4 +147,5 @@ export const ReceiveCoinRender = function() {
       </div>
     </div>
   );
-};
+};
+

react/src/components/dashboard/sendCoin/sendCoin.js

@@ -64,9 +64,17 @@ class SendCoin extends React.Component {
     this.toggleSendAPIType = this.toggleSendAPIType.bind(this);
     this._fetchNewUTXOData = this._fetchNewUTXOData.bind(this);
     this.handleClickOutside = this.handleClickOutside.bind(this);
+    this.setRecieverFromScan = this.setRecieverFromScan.bind(this);
     socket.on('messages', msg => this.updateSocketsData(msg));
   }
 
+  setRecieverFromScan(receiver) {
+    this.setState({
+      sendTo: receiver
+    });
+    document.getElementById('edexcoinSendTo').focus()
+  }
+
   componentWillMount() {
     document.addEventListener(
       'click',
@@ -745,7 +753,6 @@ class SendCoin extends React.Component {
 
     return null;
   }
-
   render() {
     if (this.props.ActiveCoin &&
         this.props.ActiveCoin.send &&

react/src/components/dashboard/sendCoin/sendCoin.render.js

@@ -5,6 +5,8 @@ import {
   secondsToString
 } from '../../../util/time';
 
+import QRModal from '../qrModal/qrModal';
+
 export const UTXOCacheInfoRender = function(refreshCacheData, isReadyToUpdate, waitUntilCallIsFinished, timestamp) {
   return (
     <div className="col-lg-12">
@@ -137,7 +139,7 @@ export const OASendUIRender = function () {
 export const SendApiTypeSelectorRender = function () {
   return (
     <div className="row">
-      <div className="col-lg-10 margin-bottom-10">
+      <div className="col-lg-9 margin-bottom-10">
         <span className="pointer">
           <label className="switch">
             <input
@@ -154,6 +156,12 @@ export const SendApiTypeSelectorRender = function () {
           </div>
         </span>
       </div>
+      <div className="col-lg-3 text-right">
+          <QRModal
+              mode="scan"
+              setRecieverFromScan={this.setRecieverFromScan}
+          />
+      </div>
     </div>
   );
 };

react/src/translate/en.js

@@ -249,7 +249,10 @@ export const _lang = {
       'INFO': 'Info',
       'ENTER': 'Enter',
       'ADDR_SM': 'address',
-      'ACTIVATING': 'Activating'
+      'ACTIVATING': 'Activating',
+      'QRCODE': 'Show QR code',
+      'SCAN_QR_CODE': 'Scan QR Code',
+      'SCAN_QRCODE_WEBCAM': 'Scan QR Code with webcam'
     },
     'ATOMIC': {
       'RAW_OUTPUT': 'Raw Output',