feat(bch): Added bch value in USD and refresh balance feature

src/components/admin-lte/admin-lte.css

@@ -12,6 +12,22 @@
     text-align: center;
 
 }
+.sidebar-balance .siderbar-balance-content{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: flex-end;
+}
+.sidebar-balance span{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.sidebar-balance .siderbar-balance-content svg{
+    margin-bottom: 1em!important;
+}
+
 
 .scanner-left-menu {
     padding: 5px 5px 5px 18px;

src/components/admin-lte/index.js

@@ -6,7 +6,7 @@ import Wallet from './wallet'
 import siteConfig from '../site-config'
 // import Audit from "./audit"
 
-import AdminLTE, { Sidebar, Navbar } from 'adminlte-2-react'
+import AdminLTE, { Sidebar, Navbar, Box } from 'adminlte-2-react'
 import ScannerModal from '../qr-scanner/modal'
 
 import Layout from '../layout'
@@ -18,20 +18,23 @@ import menuComponents from '../menu-components.js'
 
 import SendReceive from './send-receive'
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+
 const { Item } = Sidebar
 
 // Screen width to hide the side menu on click
 const MENU_HIDE_WIDTH = 770
 
 const BchWallet =
-typeof window !== 'undefined'
-  ? window.SlpWallet
-  : null
+  typeof window !== 'undefined'
+    ? window.SlpWallet
+    : null
 
 let _this
 
 class AdminLTEPage extends React.Component {
-  constructor (props) {
+  constructor(props) {
     super(props)
     _this = this
     this.state = {
@@ -39,7 +42,9 @@ class AdminLTEPage extends React.Component {
       showScannerModal: false,
       section: 'Wallet',
       menuIsHide: false,
-      walletInfo: {}
+      walletInfo: {},
+      inFetch: false,
+      usdBalance: 0
     }
 
     _this.BchWallet = BchWallet
@@ -53,7 +58,7 @@ class AdminLTEPage extends React.Component {
     ]
   }
 
-  render () {
+  render() {
     return (
       <>
         <AdminLTE
@@ -63,13 +68,34 @@ class AdminLTEPage extends React.Component {
         >
           <Sidebar.Core>
             <Item key='Balance' text='Balance' icon={siteConfig.balanceIcon}>
-              <div className='sidebar-balance'>
-                <div>
-                  <h3>{siteConfig.balanceText}</h3>
+              <Box
+                className='hover-shadow border-none background-none'
+                loaded={!_this.state.inFetch}
+              >
+                <div className='sidebar-balance'>
+                  <div>
 
-                  <p>{_this.state.bchBalance}</p>
+                    {!_this.state.inFetch && <div className="siderbar-balance-content" >
+                      <span >
+                      <h3>{siteConfig.balanceText}</h3>
+
+                        <span style={{ fontSize: "18px" }}>
+                          {_this.state.bchBalance}
+                        </span>
+                        <small>USD:  ${_this.state.usdBalance}</small>
+
+                      </span>
+                      <FontAwesomeIcon
+                        className='ml-1 icon'
+                        size='lg'
+                        icon='redo'
+                        onClick={_this.getBalance}
+                      />
+                    </div>}
+                  </div>
                 </div>
-              </div>
+              </Box>
+
             </Item>
 
             {_this.sidebar}
@@ -133,22 +159,34 @@ class AdminLTEPage extends React.Component {
   }
 
   // Get wallet balance
-  async getBalance () {
+  async getBalance() {
     try {
+      _this.setState({
+        inFetch: true
+      })
       const { mnemonic } = _this.props.walletInfo
       if (mnemonic && _this.props.bchWallet) {
         const bchWalletLib = _this.props.bchWallet
         await bchWalletLib.walletInfoPromise
-
         const myBalance = await bchWalletLib.getBalance()
-        _this.props.updateBalance(myBalance)
+
+        const bchjs = bchWalletLib.bchjs
+        const currentRate = await bchjs.Price.current('usd')
+        _this.props.updateBalance({ myBalance, currentRate })
       }
+
+      _this.setState({
+        inFetch: false
+      })
     } catch (error) {
       console.error(error)
+      _this.setState({
+        inFetch: false
+      })
     }
   }
 
-  async componentDidMount () {
+  async componentDidMount() {
     _this.customMenuItems()
     _this.addOnClickEventToScanner()
 
@@ -164,27 +202,28 @@ class AdminLTEPage extends React.Component {
     }, 250)
   }
 
-  componentDidUpdate () {
+  componentDidUpdate() {
     _this.updateState()
   }
 
   // Update component state when props change
-  updateState () {
+  updateState() {
     if (_this.props.walletInfo.mnemonic !== _this.state.walletInfo.mnemonic) {
       _this.setState({
         walletInfo: _this.props.walletInfo
       })
     }
-    if (_this.props.bchBalance !== _this.state.bchBalance) {
+    if (_this.props.bchBalance.bchBalance !== _this.state.bchBalance) {
       _this.setState({
-        bchBalance: _this.props.bchBalance
+        bchBalance: _this.props.bchBalance.bchBalance,
+        usdBalance: _this.props.bchBalance.usdBalance
       })
     }
   }
 
   // Due to that it is not possible to add the "onClick" method
   // directly to the <Item> component we do it using JS
-  customMenuItems () {
+  customMenuItems() {
     try {
       // Ignore menu items without link to components
       const ignoreItems = ['Balance', 'Qr Scanner', 'Link']
@@ -211,7 +250,7 @@ class AdminLTEPage extends React.Component {
   }
 
   // Displays the BCH balance by default
-  dropDownBalance () {
+  dropDownBalance() {
     try {
       const balanceEle = document.getElementById('Balance')
       balanceEle.children[0].click()
@@ -223,7 +262,7 @@ class AdminLTEPage extends React.Component {
   // Section change, renders the corresponding component
   // to the selected section. each menu item corresponds
   // to a section.
-  changeSection (section) {
+  changeSection(section) {
     _this.activeItemById(section)
     _this.setState({
       section: section
@@ -232,7 +271,7 @@ class AdminLTEPage extends React.Component {
   }
 
   // Adds a visual mark to the selected item on the menu
-  activeItemById (id) {
+  activeItemById(id) {
     try {
       const elementActived = document.getElementsByClassName('active')
       elementActived[0].className = ''
@@ -244,7 +283,7 @@ class AdminLTEPage extends React.Component {
   }
 
   // Hides the side menu when clicking on mobile devices
-  hideMenu () {
+  hideMenu() {
     try {
       const windowWidth = window.innerWidth
       // console.log("Window Width : ",windowWidth)
@@ -257,7 +296,7 @@ class AdminLTEPage extends React.Component {
   }
 
   // Adds the "onClick" event to the QR scanner item
-  addOnClickEventToScanner () {
+  addOnClickEventToScanner() {
     try {
       const qrScannerEle = document.getElementById('Qr Scanner')
       qrScannerEle.onclick = () => _this.onHandleToggleScannerModal()
@@ -267,7 +306,7 @@ class AdminLTEPage extends React.Component {
   }
 
   // Controller to show the QR scanner
-  onHandleToggleScannerModal () {
+  onHandleToggleScannerModal() {
     if (!_this.state.showScannerModal) {
       _this.hideMenu()
     }
@@ -281,7 +320,7 @@ class AdminLTEPage extends React.Component {
 
   // Render non-default menu items. The catch ensures that the render function
   // won't be interrupted if there is an issue porting new menu items.
-  renderNewMenuItems () {
+  renderNewMenuItems() {
     try {
       return menuComponents && menuComponents.map(m => m.menuItem)
     } catch (err) {
@@ -291,7 +330,7 @@ class AdminLTEPage extends React.Component {
   }
 
   // Displays the View corresponding to the dynamically loaded menu item.
-  renderNewViewItems () {
+  renderNewViewItems() {
     try {
       return (
         menuComponents &&
@@ -302,10 +341,10 @@ class AdminLTEPage extends React.Component {
           return ''
         })
       )
-    } catch (err) {}
+    } catch (err) { }
   }
 
-  getInvisibleMenuItem () {
+  getInvisibleMenuItem() {
     return (
       <li style={{ display: 'none' }}>
         {/* Adding this childrens prevents console errors */}
@@ -318,7 +357,7 @@ class AdminLTEPage extends React.Component {
   }
 
   // Define backends servers configuration by default
-  setDefaultServers () {
+  setDefaultServers() {
     try {
       const walletInfo = _this.props.walletInfo
       const accessLocation = window.location.hostname
@@ -351,7 +390,7 @@ class AdminLTEPage extends React.Component {
 // Props prvided by redux
 AdminLTEPage.propTypes = {
   walletInfo: PropTypes.object.isRequired, // wallet info
-  bchBalance: PropTypes.number.isRequired, // bch balance
+  bchBalance: PropTypes.object.isRequired, // bch balance
   setWalletInfo: PropTypes.func.isRequired, // set wallet info
   updateBalance: PropTypes.func.isRequired, // update bch balance
   setBchWallet: PropTypes.func.isRequired, // set minimal-slp-wallet instance

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

@@ -153,7 +153,9 @@ class Send extends React.Component {
       // update balance
       setTimeout(async () => {
         const myBalance = await bchWalletLib.getBalance()
-        _this.props.updateBalance(myBalance)
+        const bchjs = bchWalletLib.bchjs
+        const currentRate = await bchjs.Price.current('usd')
+        _this.props.updateBalance({ myBalance, currentRate })
       }, 1000)
 
       _this.resetValues()

src/components/admin-lte/wallet/create.js

@@ -5,13 +5,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 // import BchWallet from 'minimal-slp-wallet'
 
 const BchWallet =
-typeof window !== 'undefined'
-  ? window.SlpWallet
-  : null
+  typeof window !== 'undefined'
+    ? window.SlpWallet
+    : null
 
 let _this
 class NewWallet extends React.Component {
-  constructor (props) {
+  constructor(props) {
     super(props)
     _this = this
     this.state = {
@@ -22,7 +22,7 @@ class NewWallet extends React.Component {
     _this.BchWallet = BchWallet
   }
 
-  render () {
+  render() {
     return (
       <>
         <Row>
@@ -65,7 +65,7 @@ class NewWallet extends React.Component {
     )
   }
 
-  async handleCreateWallet () {
+  async handleCreateWallet() {
     try {
       const currentWallet = _this.props.walletInfo
 
@@ -106,10 +106,14 @@ class NewWallet extends React.Component {
       Object.assign(currentWallet, walletInfo)
 
       const myBalance = await bchWalletLib.getBalance()
+
+      const bchjs = bchWalletLib.bchjs
+      const currentRate = await bchjs.Price.current('usd')
+
       // console.log("myBalance", myBalance)
       // Update redux state
       _this.props.setWalletInfo(currentWallet)
-      _this.props.updateBalance(myBalance)
+      _this.props.updateBalance({ myBalance, currentRate })
       _this.props.setBchWallet(bchWalletLib)
 
       _this.setState({
@@ -121,7 +125,7 @@ class NewWallet extends React.Component {
     }
   }
 
-  handleError (error) {
+  handleError(error) {
     // console.error(error)
     let errMsg = ''
     if (error.message) {

src/components/admin-lte/wallet/import.js

@@ -5,15 +5,15 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 // import BchWallet from 'minimal-slp-wallet'
 
 const BchWallet =
-typeof window !== 'undefined'
-  ? window.SlpWallet
-  : null
+  typeof window !== 'undefined'
+    ? window.SlpWallet
+    : null
 
 const { Text } = Inputs
 
 let _this
 class ImportWallet extends React.Component {
-  constructor (props) {
+  constructor(props) {
     super(props)
 
     _this = this
@@ -27,7 +27,7 @@ class ImportWallet extends React.Component {
     _this.BchWallet = BchWallet
   }
 
-  render () {
+  render() {
     return (
       <Row className=''>
         <Col sm={2} />
@@ -84,12 +84,12 @@ class ImportWallet extends React.Component {
     )
   }
 
-  componentDidMount () {
+  componentDidMount() {
     // add max length property to mnemonic input
     // document.getElementById("import-mnemonic").maxLength = "12"
   }
 
-  handleUpdate (event) {
+  handleUpdate(event) {
     let value = event.target.value
     if (event.target.name === 'mnemonic') {
       value = value.toLowerCase()
@@ -99,7 +99,7 @@ class ImportWallet extends React.Component {
     })
   }
 
-  async handleImportWallet () {
+  async handleImportWallet() {
     try {
       _this.validateInputs()
 
@@ -147,10 +147,12 @@ class ImportWallet extends React.Component {
       Object.assign(currentWallet, walletInfo)
 
       const myBalance = await bchWalletLib.getBalance()
+      const bchjs = bchWalletLib.bchjs
+      const currentRate = await bchjs.Price.current('usd')
 
       // Update redux state
       _this.props.setWalletInfo(currentWallet)
-      _this.props.updateBalance(myBalance)
+      _this.props.updateBalance({ myBalance, currentRate })
       _this.props.setBchWallet(bchWalletLib)
 
       // Reset form and component state
@@ -164,7 +166,7 @@ class ImportWallet extends React.Component {
   }
 
   // Reset form and component state
-  resetValues () {
+  resetValues() {
     _this.setState({
       mnemonic: '',
       privateKey: '',
@@ -174,7 +176,7 @@ class ImportWallet extends React.Component {
     mnemonicEle.value = ''
   }
 
-  validateInputs () {
+  validateInputs() {
     const { mnemonic } = _this.state
     if (mnemonic) {
       const spaceCount = mnemonic.split(' ').length // mnemonic.match(/ /g).length
@@ -188,7 +190,7 @@ class ImportWallet extends React.Component {
     }
   }
 
-  handleError (error) {
+  handleError(error) {
     // console.error(error)
     let errMsg = ''
     if (error.message) {

src/components/layout.css

@@ -737,4 +737,7 @@ pre tt:after {
 }
 .breadcrumb{
   display:none
+}
+.background-none{
+  background: none!important;
 }

src/redux/createStore.js

@@ -3,9 +3,9 @@ import { createStore as reduxCreateStore } from 'redux'
 import { getWalletInfo, setWalletInfo } from '../components/localWallet'
 // import BchWallet from 'minimal-slp-wallet'
 const BchWallet =
-typeof window !== 'undefined'
-  ? window.SlpWallet
-  : null
+  typeof window !== 'undefined'
+    ? window.SlpWallet
+    : null
 
 const reducer = (state, action) => {
   // Update walletInfo state property
@@ -27,11 +27,18 @@ const reducer = (state, action) => {
   // Update bchBalance state property
   if (action.type === 'UPDATE_BALANCE') {
     // Convert satoshis to bch
-    const satoshis = action.value
+    const { myBalance, currentRate } = action.value
+
+    const satoshis = myBalance
     const bch = satoshis / 100000000
 
+    const bchBalance = Number(bch.toFixed(8))
+    const _usdBalance = bchBalance * (currentRate / 100)
+    const usdBalance = Number(_usdBalance.toFixed(2)) // usd balance
+
+
     return Object.assign({}, state, {
-      bchBalance: Number(bch.toFixed(8))
+      bchBalance: { bchBalance, usdBalance }
     })
   }
   // Adds the minimal-slp-wallet instance to the Redux state
@@ -78,7 +85,7 @@ const instanceWallet = () => {
 // initial state
 const initialState = {
   walletInfo: localStorageInfo, // Object wallet info
-  bchBalance: 0, // Wallet Balance
+  bchBalance: { bchBalance: 0, usdBalance: 0 }, // Wallet Balance
   bchWallet: instanceWallet() // minimal-slp-wallet instance
 }