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) {

zcash-client-backend-wasm/src/lib.rs

@@ -248,6 +248,33 @@ impl Client {
             .sum::<u64>() as u32
     }
 
+    // TODO: This will be inaccurate if the balance exceeds a u32, but u64 -> JavaScript
+    // requires BigUint64Array which has limited support across browsers, and is not
+    // implemented in the LTS version of Node.js. For now, let's assume that no one is
+    // going to use a web wallet with more than ~21 TAZ.
+    pub fn verified_balance(&self) -> u32 {
+        let anchor_height = match self.get_target_height_and_anchor_offset() {
+            Some((height, anchor_offset)) => height - anchor_offset as u32,
+            None => return 0,
+        };
+
+        self.txs
+            .read()
+            .unwrap()
+            .values()
+            .map(|tx| {
+                if tx.block as u32 <= anchor_height {
+                    tx.notes
+                        .iter()
+                        .map(|nd| if nd.spent.is_none() { nd.note.value } else { 0 })
+                        .sum::<u64>()
+                } else {
+                    0
+                }
+            })
+            .sum::<u64>() as u32
+    }
+
     pub fn scan_block(&self, block: &[u8]) -> bool {
         let block: CompactBlock = match parse_from_bytes(block) {
             Ok(block) => block,

zcash-client-sdk-js/src/index.js

@@ -58,7 +58,7 @@ export class ZcashClient {
   }
 
   updateUI () {
-    this.uiHandlers.updateBalance(this.client.balance() / COIN)
+    this.uiHandlers.updateBalance(this.client.balance() / COIN, this.client.verified_balance() / COIN)
   }
 
   sync () {