feat(demo): Added balance lookup to demo component

src/demo-component/index.js

@@ -8,9 +8,37 @@
 
 import React from 'react'
 import { Row, Col, Content, Box, Button } from 'adminlte-2-react'
+import { getWalletInfo } from 'gatsby-ipfs-web-wallet/src/components/localWallet'
 
+const BchWallet =
+  typeof window !== 'undefined'
+    ? window.SlpWallet
+    : null
+
+let _this
 class DemoComponent extends React.Component {
+  constructor (props) {
+    super(props)
+    _this = this
+    this.state = {
+      unconfirmedBalance: 0,
+      confirmedBalance: 0,
+      totalBalance: 0,
+      inFetch: false,
+      bchWallet: '',
+      isChecked: ''
+
+    }
+  }
+
   render () {
+    const {
+      unconfirmedBalance,
+      confirmedBalance,
+      totalBalance,
+      inFetch,
+      isChecked
+    } = _this.state
     return (
       <Content
         title='Demo Component'
@@ -20,20 +48,104 @@ class DemoComponent extends React.Component {
         <Row>
           <Col xs={12}>
             <Box
-              title='A Box'
+              title='BCH Balance'
               type='primary'
               closable
               collapsable
-              footer={<Button type='danger' text='Danger Button' />}
+              loaded={!inFetch}
+              footer={
+                <Button
+                  type='primary'
+                  text='Check Balance'
+                  onClick={_this.handleGetBalance}
+                />
+              }
             >
-              This is the View portion of the Demo Component. This view is
-              controlled by the src/demo-component/index.js file.
+
+              {
+                isChecked &&
+                  <div>
+                    <p>Confirmed: {confirmedBalance}</p>
+                    <p>Unconfirmed: {unconfirmedBalance}</p>
+                    <p>Total : <strong>{totalBalance}</strong></p>
+                  </div>
+
+              }
+
             </Box>
           </Col>
         </Row>
       </Content>
     )
   }
+
+  componentDidMount () {
+    _this.instanceWallet() // Crea una instancia de Web Wallet
+  }
+
+  // Get wallet balance
+  async handleGetBalance () {
+    try {
+      _this.setState({
+        inFetch: true
+      })
+
+      const addr = 'bitcoincash:qr69kyzha07dcecrsvjwsj4s6slnlq4r8c30lxnur3'
+
+      const bchWallet = _this.state.bchWallet
+      const bchjs = bchWallet.bchjs
+
+      // Obteniendo balance
+      const balances = await bchjs.Electrumx.balance(addr)
+
+      const totalBalance = balances.balance.confirmed + balances.balance.unconfirmed
+
+      _this.setState({
+        inFetch: false,
+        unconfirmedBalance: balances.balance.unconfirmed,
+        confirmedBalance: balances.balance.confirmed,
+        totalBalance: totalBalance,
+        isChecked: true
+      })
+    } catch (error) {
+      console.error(error)
+      _this.setState({
+        inFetch: false
+      })
+    }
+  }
+
+  // Creates an instance  of minimal-slp-wallet, with
+  // the local storage information if it exists
+  instanceWallet () {
+    try {
+      const localStorageInfo = getWalletInfo()
+      if (!localStorageInfo.mnemonic) return null
+
+      const jwtToken = localStorageInfo.JWT
+      const restURL = localStorageInfo.selectedServer
+      const bchjsOptions = {}
+
+      if (jwtToken) {
+        bchjsOptions.apiToken = jwtToken
+      }
+      if (restURL) {
+        bchjsOptions.restURL = restURL
+      }
+      const bchWalletLib = new BchWallet(localStorageInfo.mnemonic, bchjsOptions)
+
+      // Update bchjs instances  of minimal-slp-wallet libraries
+      bchWalletLib.tokens.sendBch.bchjs = new bchWalletLib.BCHJS(bchjsOptions)
+      bchWalletLib.tokens.utxos.bchjs = new bchWalletLib.BCHJS(bchjsOptions)
+
+      _this.setState({
+        bchWallet: bchWalletLib
+      })
+      return bchWalletLib
+    } catch (error) {
+      console.warn(error)
+    }
+  }
 }
 
 export default DemoComponent

src/gatsby-ipfs-web-wallet/components/menu-components.js

@@ -15,7 +15,7 @@ const { Item } = Sidebar
 const MenuComponents = [
   {
     key: 'Demo Component',
-    component: <DemoComponent />,
+    component: <DemoComponent key='Demo Component' />,
     menuItem: <Item icon='fas-cog' key='Demo Component' text='Demo Component' />
   }
 ]