feat(qr-scan): Added qr code functionality - send part 2

src/components/admin-lte/send-receive/index.js

@@ -1,10 +1,11 @@
 import React from "react"
 import PropTypes from "prop-types"
-import { Content } from "adminlte-2-react"
+import { Content, Row, Col, Box } from "adminlte-2-react"
 import Receive from "./receive"
 import Send from "./send"
 
-import './send-receive.css'
+import "./send-receive.css"
+
 let _this
 class SendReceive extends React.Component {
   constructor(props) {
@@ -16,16 +17,25 @@ class SendReceive extends React.Component {
   render() {
     return (
       <>
-        <Content>
-          <Receive
-            walletInfo={_this.props.walletInfo}
-          />  
-          <Send 
-          updateBalance={_this.props.updateBalance}
-          bchWallet={_this.props.bchWallet}
-          />
-          
-        </Content>
+        {_this.props.walletInfo.mnemonic ? (
+          <Content>
+            <Receive walletInfo={_this.props.walletInfo} />
+            <Send
+              updateBalance={_this.props.updateBalance}
+              bchWallet={_this.props.bchWallet}
+            />
+          </Content>
+        ) : (
+          <Content>
+            <Box padding="true" className="container-nofound">
+              <Row>
+                <Col xs={12}>
+                  <em>You need to create or import a wallet first</em>
+                </Col>
+              </Row>
+            </Box>
+          </Content>
+        )}
       </>
     )
   }
@@ -35,7 +45,7 @@ SendReceive.propTypes = {
   walletInfo: PropTypes.object.isRequired,
   updateBalance: PropTypes.func.isRequired,
   setBchWallet: PropTypes.func.isRequired,
-  bchWallet:PropTypes.object, 
+  bchWallet: PropTypes.object,
 }
 
 export default SendReceive

src/components/admin-lte/send-receive/send.js

@@ -3,11 +3,11 @@ import PropTypes from "prop-types"
 import { Content, Row, Col, Box, Inputs, Button } from "adminlte-2-react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import BchWallet from "minimal-slp-wallet"
-
+import ScannerModal from "../../qr-scanner/modal"
 const { Text } = Inputs
 
 let _this
-class Configure extends React.Component {
+class Send extends React.Component {
   constructor(props) {
     super(props)
 
@@ -18,69 +18,90 @@ class Configure extends React.Component {
       amountSat: "",
       errMsg: "",
       txId: "",
+      showScan: false,
     }
     _this.BchWallet = BchWallet
   }
 
   render() {
     return (
-      <Content>
-        <Row>
-          <Col sm={2} />
-          <Col sm={8}>
-            <Box className="hover-shadow border-none mt-2">
-              <Row>
-                <Col sm={12} className="text-center">
-                  <h1>
-                    <FontAwesomeIcon
-                      className="title-icon"
-                      size="xs"
-                      icon={"paper-plane"}
-                    />
-                    <span>Send</span>
-                  </h1>
-                  <Box className="border-none">
-                    <Text
-                      id="addressToSend"
-                      name="address"
-                      placeholder="Enter bch address to send"
-                      label="BCH Address"
-                      labelPosition="above"
-                      onChange={_this.handleUpdate}
-                    />
-                    <Text
-                      id="amountToSend"
-                      name="amountSat"
-                      placeholder="Enter amount to send"
-                      label="Amount"
-                      labelPosition="above"
-                      onChange={_this.handleUpdate}
-                    />
-                    <Button
-                      text="Send"
-                      type="primary"
-                      className="btn-lg"
-                      onClick={_this.send}
-                    />
-                  </Box>
-                </Col>
-                <Col sm={12} className="text-center">
-                  {_this.state.errMsg && (
-                    <p className="error-color">{_this.state.errMsg}</p>
-                  )}
-                  {_this.state.txId && (
-                    <p className="">Transaction ID: {_this.state.txId}</p>
-                  )}
-                </Col>
-              </Row>
-            </Box>
-          </Col>
-          <Col sm={2} />
-        </Row>
-      </Content>
+      <>
+        <Content>
+          <Row>
+            <Col sm={2} />
+            <Col sm={8}>
+              <Box className="hover-shadow border-none mt-2">
+                <Row>
+                  <Col sm={12} className="text-center">
+                    <h1>
+                      <FontAwesomeIcon
+                        className="title-icon"
+                        size="xs"
+                        icon={"paper-plane"}
+                      />
+                      <span>Send</span>
+                    </h1>
+                    <Box className="border-none">
+                      <Text
+                        id="addressToSend"
+                        name="address"
+                        placeholder="Enter bch address to send"
+                        label="BCH Address"
+                        labelPosition="above"
+                        onChange={_this.handleUpdate}
+                        className="title-icon"
+                        buttonRight={
+                          <Button
+                            icon="fa-qrcode"
+                            onClick={_this.toggleScanner}
+                          />
+                        }
+                      />
+
+                      <FontAwesomeIcon
+                        className="title-icon"
+                        size="lg"
+                        icon={"qrcode"}
+                      />
+
+                      <Text
+                        id="amountToSend"
+                        name="amountSat"
+                        placeholder="Enter amount to send"
+                        label="Amount"
+                        labelPosition="above"
+                        onChange={_this.handleUpdate}
+                      />
+                      <Button
+                        text="Send"
+                        type="primary"
+                        className="btn-lg"
+                        onClick={_this.send}
+                      />
+                    </Box>
+                  </Col>
+                  <Col sm={12} className="text-center">
+                    {_this.state.errMsg && (
+                      <p className="error-color">{_this.state.errMsg}</p>
+                    )}
+                    {_this.state.txId && (
+                      <p className="">Transaction ID: {_this.state.txId}</p>
+                    )}
+                  </Col>
+                </Row>
+              </Box>
+            </Col>
+            <Col sm={2} />
+          </Row>
+          <ScannerModal
+            show={_this.state.showScan}
+            onHide={_this.toggleScanner}
+            onScan={_this.onScan}
+          />
+        </Content>
+      </>
     )
   }
-  componentDidMount() {}
 
   handleUpdate(event) {
     let value = event.target.value
@@ -111,7 +132,9 @@ class Configure extends React.Component {
 
       // Ensure the wallet UTXOs are up-to-date.
       const walletAddr = bchWalletLib.walletInfo.address
-      bchWalletLib.utxos.bchUtxos = await bchWalletLib.utxos.initUtxoStore(walletAddr)
+      bchWalletLib.utxos.bchUtxos = await bchWalletLib.utxos.initUtxoStore(
+        walletAddr
+      )
 
       // Send the BCH.
       const result = await bchWalletLib.send(receivers)
@@ -180,10 +203,59 @@ class Configure extends React.Component {
       throw error
     }
   }
+  toggleScanner() {
+    _this.setState({
+      showScan: !_this.state.showScan,
+    })
+  }
+  resetAddressValue() {
+    _this.setState({
+      address: "",
+      errMsg: "",
+    })
+    const addressEle = document.getElementById("addressToSend")
+    addressEle.value = ""
+  }
+
+  onScan(data) {
+    const validateAdrrs = ["bitcoincash", "simpleledger"]
+    try {
+      _this.resetAddressValue()
+      if (!data) {
+        throw new Error("No Result!")
+      }
+      if (typeof data !== "string") {
+        throw new Error("It should scan a bch address or slp address")
+      }
+      // Validates that the words "bitcoincash" or "simpleledger" are contained
+      let isValid = false
+      for (let i = 0; i < validateAdrrs.length; i++) {
+        isValid = isValid ? true : data.match(validateAdrrs[i])
+        if (isValid) {
+          _this.setState({
+            address: data,
+            errMsg: "",
+          })
+          const addressEle = document.getElementById("addressToSend")
+          addressEle.value = data
+        }
+      }
+      if (!isValid) {
+        throw new Error("It should scan a bch address or slp address")
+      }
+      _this.toggleScanner()
+    } catch (error) {
+      _this.toggleScanner()
+      _this.setState({
+        errMsg: error.message,
+      })
+    }
+  }
+  componentDidMount() {}
 }
-Configure.propTypes = {
+Send.propTypes = {
   updateBalance: PropTypes.func.isRequired,
   bchWallet: PropTypes.object,
 }
 
-export default Configure
+export default Send

src/components/app-colors.css

@@ -32,4 +32,7 @@
 }
 .error-color{
   color: red;
+}
+.input-group-btn svg{
+  color : var(--main-color)
 }

src/components/qr-scanner/modal.js

@@ -7,8 +7,7 @@ class ScannerModal extends Component {
   constructor(props) {
     super(props)
     _this = this
-    this.state = {
-    }
+    this.state = {}
   }
 
   modalFooter = (
@@ -27,7 +26,7 @@ class ScannerModal extends Component {
         modalCloseButton={true}
         onHide={_this.props.onHide}
       >
-        <QScanner></QScanner>
+        <QScanner onError={_this.props.onError} onScan={_this.props.onScan} />
       </Content>
     )
   }
@@ -35,5 +34,7 @@ class ScannerModal extends Component {
 ScannerModal.propTypes = {
   show: PropTypes.bool.isRequired,
   onHide: PropTypes.func.isRequired,
+  onError: PropTypes.func,
+  onScan: PropTypes.func,
 }
 export default ScannerModal

src/components/qr-scanner/qr-scanner.js

@@ -1,58 +1,62 @@
-import React, { Component } from 'react'
-import loadable from '@loadable/component'
-
-import './qr-scanner.css'
-const QrReader = loadable(() => import('react-qr-reader'))
-
+import React, { Component } from "react"
+import loadable from "@loadable/component"
+import PropTypes from "prop-types"
+import "./qr-scanner.css"
+const QrReader = loadable(() => import("react-qr-reader"))
 
 let _this
 class QScanner extends Component {
-
   constructor(props) {
     super(props)
-    _this =  this
-
+    _this = this
 
     this.state = {
-      result: 'No Result',
-      facingMode: 'environment'
+      result: "No Result",
+      facingMode: "environment",
     }
   }
 
   handleScan = data => {
     if (data) {
       this.setState({
-        result: data
+        result: data,
       })
+      _this.props.onScan && _this.props.onScan(data)
     }
   }
   handleError = err => {
     console.error(err)
-    alert(err)
+    _this.props.onError ? _this.props.onError(err) : alert(err)
   }
   render() {
     return (
       <div className="QRScanner-container">
         <h4>Facing Mode: {_this.state.facingMode}</h4>
-        <button className="change-button" onClick={_this.changeMode}>Change</button>
+        <button className="change-button" onClick={_this.changeMode}>
+          Change
+        </button>
         <QrReader
           delay={300}
           onError={this.handleError}
           onScan={this.handleScan}
           facingMode={_this.state.facingMode}
         />
-        <b><p className="qr-result">{this.state.result}</p></b>
+        <b>
+          <p className="qr-result">{this.state.result}</p>
+        </b>
       </div>
     )
   }
   changeMode() {
-    let mode = _this.state.facingMode === 'user' ?
-      'environment' : 'user'
+    let mode = _this.state.facingMode === "user" ? "environment" : "user"
     console.log(`changing to ${mode} mode`)
     _this.setState({
-      facingMode: mode
+      facingMode: mode,
     })
   }
 }
-
+QScanner.propTypes = {
+  onError: PropTypes.func,
+  onScan: PropTypes.func,
+}
 export default QScanner