Merge branch 'redux' of https://github.com/SuperNETorg/EasyDEX-GUI into cleanup

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,78 @@
+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: null,
+    };
+    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();
+    }
+  }
+
+  handleError(err) {
+    this.setState({
+      error: err,
+    });
+  }
+
+  openModal() {
+    this.setState({
+      modalIsOpen: true
+    });
+
+    if (this.props.mode === 'scan') {
+      ReactDOM.render(
+        <QrReader
+          delay={50}
+          style={{
+            height: 281,
+            width: 500,
+            transform: 'scaleX(-1)'
+          }}
+          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,82 @@
+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"></i>
+      </span>
+      <div
+        className={ 'modal modal-3d-sign ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }
+        id="QRModal">
+        <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"
+                onClick={ this.closeModal }>
+                <span>×</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"></i>
+        { translate('INDEX.SCAN_QRCODE_WEBCAM') }
+      </button>
+      <div
+        className={ 'modal modal-3d-sign ' + (this.state.modalIsOpen ? 'show in' : 'fade hide') }
+        id="QRReadModal">
+          <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"
+                  onClick={ this.closeModal }>
+                  <span>×</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

@@ -55,6 +55,7 @@ class SendCoin extends React.Component {
       currentStackLength: 0,
       totalStackLength: 0,
       utxoMethodInProgress: false,
+      isCameraFeatureDetected: false,
     };
     this.updateInput = this.updateInput.bind(this);
     this.handleBasiliskSend = this.handleBasiliskSend.bind(this);
@@ -64,15 +65,44 @@ 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);
+    this.detectCamera = this.detectCamera.bind(this);
     socket.on('messages', msg => this.updateSocketsData(msg));
   }
 
+  // test device camera capabilities
+  detectCamera() {
+    const _getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
+
+    _getUserMedia(
+      { 'video': true },
+      function() {
+        this.setState({
+          isCameraFeatureDetected: true,
+        });
+      },
+      function() {
+        console.warn('this device doesn\'t have camera!');
+      }
+    );
+  }
+
+  setRecieverFromScan(receiver) {
+    this.setState({
+      sendTo: receiver
+    });
+
+    document.getElementById('edexcoinSendTo').focus();
+  }
+
   componentWillMount() {
     document.addEventListener(
       'click',
       this.handleClickOutside,
       false
     );
+
+    this.detectCamera();
   }
 
   componentWillUnmount() {
@@ -173,7 +203,7 @@ class SendCoin extends React.Component {
         this,
         refreshCacheData,
         isReadyToUpdate,
-        waitUntilCallIsFinished,  
+        waitUntilCallIsFinished,
         timestamp
       );
     }
@@ -745,7 +775,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-8 margin-bottom-10">
         <span className="pointer">
           <label className="switch">
             <input
@@ -154,6 +156,13 @@ export const SendApiTypeSelectorRender = function() {
           </div>
         </span>
       </div>
+      { this.stateisCameraFeatureDetected &&
+        <div className="col-lg-4 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',