refactored no video cam device error

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

@@ -32,9 +32,15 @@ class QRModal extends React.Component {
   }
 
   handleError(err) {
-    this.setState({
+    if (err.name === 'NoVideoInputDevicesError') {
-      error: err,
+      this.setState({
-    });
+        error: 'Error: No video input devices found!',
+      });
+    } else {
+      this.setState({
+        error: 'Error: unknown error!',
+      });
+    }
   }
 
   openModal() {

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

@@ -66,7 +66,13 @@ export const QRModalReaderRender = function () {
               </div>
               <div className="modal-body">
                 <div className="animsition vertical-align fade-in">
-                  <div className="page-content vertical-align-middle">
+                  <div
+                    className="page-content vertical-align-middle"
+                    style={{
+                      width: '100%',
+                      textAlign: 'center',
+                      fontSize: '16px'
+                    }}>
                     <div id="webcam">
                       { this.state.error }
                     </div>

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

@@ -124,12 +124,14 @@ class ReceiveCoin extends React.Component {
         if (this.isBasiliskMode() &&
             this.hasNoAmount(address)) {
           address.amount = _cache && _cache[_coin][address.address] &&
+            _cache[_coin][address.address].getbalance &&
             _cache[_coin][address.address].getbalance.data &&
             _cache[_coin][address.address].getbalance.data.balance ? _cache[_coin][address.address].getbalance.data.balance : 'N/A';
         }
         if (this.isBasiliskMode() &&
             this.hasNoInterest(address)) {
           address.interest = _cache && _cache[_coin][address.address] &&
+            _cache[_coin][address.address].getbalance &&
             _cache[_coin][address.address].getbalance.data &&
             _cache[_coin][address.address].getbalance.data.interest ? _cache[_coin][address.address].getbalance.data.interest : 'N/A';
         }

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

@@ -55,7 +55,6 @@ 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);
@@ -66,27 +65,9 @@ class SendCoin extends React.Component {
     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
@@ -101,8 +82,6 @@ class SendCoin extends React.Component {
       this.handleClickOutside,
       false
     );
-
-    this.detectCamera();
   }
 
   componentWillUnmount() {

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

@@ -163,13 +163,11 @@ export const SendApiTypeSelectorRender = function() {
           </div>
         </span>
       </div>
-      { this.state.isCameraFeatureDetected &&
+      <div className="col-lg-4 text-right">
-        <div className="col-lg-4 text-right">
+        <QRModal
-          <QRModal
+          mode="scan"
-            mode="scan"
+          setRecieverFromScan={ this.setRecieverFromScan } />
-            setRecieverFromScan={ this.setRecieverFromScan } />
+      </div>
-        </div>
-      }
     </div>
   );
 };

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

@@ -41,7 +41,7 @@ export const WalletsNavWithWalletRender = function() {
             { this.props.ActiveCoin.mode === 'native' &&
               <button
                 type="button"
-                className="btn btn-success waves-effect waves-light"
+                className="btn btn-info waves-effect waves-light"
                 onClick={ this.toggleNativeWalletInfo }>
                 <i className="icon fa-info"></i>
               </button>
@@ -60,7 +60,7 @@ export const WalletsNavWithWalletRender = function() {
             </button>
             <button
               type="button"
-              className="btn btn-info waves-effect waves-light"
+              className="btn btn-success waves-effect waves-light"
               onClick={ () => this.toggleReceiveCoinForm(!this.props.ActiveCoin.receive) }>
               <i className="icon fa-inbox"></i> { translate('INDEX.RECEIVE') }
             </button>