feat(send): Finished the bch send implementation

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

@@ -1,7 +1,7 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { Content } from "adminlte-2-react"
-import { Row, Col, Box, Inputs } from "adminlte-2-react"
+import { Row, Col, Box } from "adminlte-2-react"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 
 var QRCode = require("qrcode.react")
@@ -44,7 +44,7 @@ class Receive extends React.Component {
                         fgColor={"#333"}
                       />
                       <p>{_this.state.addr}</p>
-                      <label className="switch-address">
+                      <label className="switch-address" htmlFor="address-checkbox">
                         <input
                           id="address-checkbox"
                           type="checkbox"

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

@@ -17,9 +17,9 @@ class Configure extends React.Component {
       address: "",
       amountSat: "",
       errMsg: "",
+      txId: "",
     }
     _this.BchWallet = BchWallet
-
   }
 
   render() {
@@ -51,7 +51,7 @@ class Configure extends React.Component {
                     <Text
                       id="amountToSend"
                       name="amountSat"
-                      placeholder="Enter amount to send ( satoshis )"
+                      placeholder="Enter amount to send"
                       label="Amount"
                       labelPosition="above"
                       onChange={_this.handleUpdate}
@@ -68,6 +68,9 @@ class Configure extends React.Component {
                   {_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>
@@ -88,32 +91,64 @@ class Configure extends React.Component {
   }
   async send() {
     try {
+      _this.validateInputs()
+
       const bchWalletLib = _this.props.bchWallet
-      const { address ,amountSat} = _this.state
+      const { address, amountSat } = _this.state
+      
       const receivers = [
         {
-            address,
-            // amount in satoshis, 1 satoshi = 0.00000001 Bitcoin
-            amountSat :Number(amountSat)
-        }
-    ];
-      // Update instance with JWT
-       if (!bchWalletLib) {
-         throw new Error("Wallet not found")
-       }
-
-
-      await bchWalletLib.walletInfoPromise
-
+          address,
+          // amount in satoshis, 1 satoshi = 0.00000001 Bitcoin
+          amountSat: Number(amountSat) * 100000000,
+        },
+      ]
       console.log('receivers',receivers)
+      if (!bchWalletLib) {
+        throw new Error("Wallet not found")
+      }
+
+
+
+      // The following line of code solved the 'UTXOS list empty' problem
+      // The Function below is called at creating an instance of the library
+      // https://github.com/Permissionless-Software-Foundation/minimal-slp-wallet/blob/master/lib/utxos.js#L88-L97
+      //
+      // This function stores the utxos in the variable bchUtxos
+      // I don't find the reason why the instance of the library returns an empty array
+      // console.log('bch utxos ', bchWalletLib.utxos.bchUtxos )
+
+      bchWalletLib.utxos.bchUtxos = await bchWalletLib.utxos.getBchUtxos()
 
       const result = await bchWalletLib.send(receivers)
-      console.log("result", result) 
+      // console.log('result',result)
 
-    } catch (error) {
-      console.warn(error)
       _this.setState({
-        errMsg: error.message,
+        txId: result,
+      })
+
+      // update balance
+      setTimeout(async () => {
+        const myBalance = await bchWalletLib.getBalance()
+        _this.props.updateBalance(myBalance)
+
+      }, 1000)
+
+      _this.resetValues()
+    } catch (error) {
+      let errMsg
+      if(error.message){
+        errMsg = error.message
+      }else if(error.error){
+        errMsg = error.error
+
+      }
+      _this.setState(prevState => {
+        return {
+          ...prevState,
+          errMsg,
+          txId:""
+        }
       })
     }
   }
@@ -122,8 +157,36 @@ class Configure extends React.Component {
   resetValues() {
     _this.setState({
       address: "",
+      amountSat: "",
       errMsg: "",
     })
+    const amountEle = document.getElementById("amountToSend")
+    amountEle.value = ""
+
+    const addressEle = document.getElementById("addressToSend")
+    addressEle.value = ""
+  }
+  validateInputs() {
+    try {
+      const { address, amountSat } = _this.state
+      const amountNumber = Number(amountSat)
+      console.log(_this.state)
+      if (!address) {
+        throw new Error("Address is required")
+      }
+      if (!amountSat) {
+        throw new Error("Amount is required")
+      }
+
+      if (!amountNumber) {
+        throw new Error("Amount must be a number")
+      }
+      if (amountNumber < 0) {
+        throw new Error("Amount must be greater than zero")
+      }
+    } catch (error) {
+      throw error
+    }
   }
 }
 Configure.propTypes = {

src/components/app-colors.css

@@ -30,3 +30,6 @@
 .box{
   border-color: var(--main-color)!important;
 }
+.error-color{
+  color: red;
+}