Expose verified (and thus spendable) balance

demo-www/index.html

@@ -14,6 +14,7 @@
       <h2 id="zcash-client-address"></h2>
       <p>That's your Zcash address!</p>
       <h2 id="zcash-client-balance"></h2>
+      <h2 id="zcash-client-spendable-balance"></h2>
       <table id="zcash-client-yes-balance">
         <tr>
           <td><label for="zcash-client-send-to-address">To:</label></td>

demo-www/index.js

@@ -2,6 +2,7 @@ import { ZcashClient } from 'zcash-client-sdk'
 
 const address = document.getElementById('zcash-client-address')
 const balance = document.getElementById('zcash-client-balance')
+const spendableBalance = document.getElementById('zcash-client-spendable-balance')
 const yesBalance = document.getElementById('zcash-client-yes-balance')
 const noBalance = document.getElementById('zcash-client-no-balance')
 const sendToAddress = document.getElementById('zcash-client-send-to-address')
@@ -13,15 +14,19 @@ var zcashClient = new ZcashClient('http://localhost:8081', {
   setAddress: (newAddress) => {
     address.textContent = newAddress
   },
-  updateBalance: (newBalance) => {
+  updateBalance: (newBalance, newVerifiedBalance) => {
     balance.textContent = `Balance: ${newBalance} TAZ`
+    spendableBalance.textContent = `Spendable: ${newVerifiedBalance} TAZ`
     if (newBalance > 0) {
-      yesBalance.style.display = ''
       noBalance.style.display = 'none'
     } else {
-      yesBalance.style.display = 'none'
       noBalance.style.display = ''
     }
+    if (newVerifiedBalance > 0) {
+      yesBalance.style.display = ''
+    } else {
+      yesBalance.style.display = 'none'
+    }
   },
   updateSyncStatus: (syncedHeight, latestHeight) => {
     if (syncedHeight === latestHeight) {