notify popup of changes

extension/lib/wallet/types.ts

@@ -106,3 +106,7 @@ export interface ReserveCreationInfo {
   selectedDenoms: Denomination[];
   withdrawFee: AmountJson;
 }
+
+export interface Notifier {
+  notify();
+}

extension/lib/wallet/wallet.ts

@@ -22,7 +22,7 @@
  */
 
 import * as native from "./emscriptif";
-import {AmountJson, CreateReserveResponse, IMintInfo, Denomination} from "./types";
+import {AmountJson, CreateReserveResponse, IMintInfo, Denomination, Notifier} from "./types";
 import {HttpResponse, RequestException} from "./http";
 import {Query} from "./query";
 import {Checkable} from "./checkable";
@@ -492,12 +492,17 @@ export class Wallet {
   private db: IDBDatabase;
   private http: HttpRequestLibrary;
   private badge: Badge;
+  private notifier: Notifier;
 
 
-  constructor(db: IDBDatabase, http: HttpRequestLibrary, badge: Badge) {
+  constructor(db: IDBDatabase,
+              http: HttpRequestLibrary,
+              badge: Badge,
+              notifier: Notifier) {
     this.db = db;
     this.http = http;
     this.badge = badge;
+    this.notifier = notifier;
   }
 
 
@@ -687,7 +692,8 @@ export class Wallet {
       .put("transactions", t)
       .put("history", historyEntry)
       .putAll("coins", payCoinInfo.map((pci) => pci.updatedCoin))
-      .finish();
+      .finish()
+      .then(() => { this.notifier.notify(); });
   }
 
 
@@ -896,7 +902,8 @@ export class Wallet {
       .delete("precoins", coin.coinPub)
       .add("coins", coin)
       .add("history", historyEntry)
-      .finish();
+      .finish()
+      .then(() => { this.notifier.notify(); });
   }
 
 

extension/lib/wallet/wxmessaging.ts

@@ -20,6 +20,8 @@ import {deleteDb, exportDb, openTalerDb} from "./db";
 import {BrowserHttpLib} from "./http";
 import {Checkable} from "./checkable";
 import {AmountJson} from "./types";
+import Port = chrome.runtime.Port;
+import {Notifier} from "./types";
 
 "use strict";
 
@@ -155,6 +157,32 @@ function dispatch(handlers, req, sendResponse) {
   }
 }
 
+class ChromeNotifier implements Notifier {
+  ports: Port[] = [];
+
+  constructor() {
+    chrome.runtime.onConnect.addListener((port) => {
+      console.log("got connect!");
+      this.ports.push(port);
+      port.onDisconnect.addListener(() => {
+        let i = this.ports.indexOf(port);
+        if (i >= 0) {
+          this.ports.splice(i, 1);
+        } else {
+          console.error("port already removed");
+        }
+      });
+    });
+  }
+
+  notify() {
+    console.log("notifying all ports");
+    for (let p of this.ports) {
+      p.postMessage({notify: true});
+    }
+  }
+}
+
 
 export function wxMain() {
   chrome.browserAction.setBadgeText({text: ""});
@@ -170,7 +198,8 @@ export function wxMain() {
          .then((db) => {
            let http = new BrowserHttpLib();
            let badge = new ChromeBadge();
-           let wallet = new Wallet(db, http, badge);
+           let notifier = new ChromeNotifier();
+           let wallet = new Wallet(db, http, badge, notifier);
            let handlers = makeHandlers(db, wallet);
            chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
              try {

extension/popup/popup.tsx

@@ -26,6 +26,14 @@ declare var m: any;
 declare var i18n: any;
 
 
+function onUpdateNotification(f) {
+  let port = chrome.runtime.connect({name: "notifications"});
+  port.onMessage.addListener((msg, port) => {
+    f();
+  });
+}
+
+
 export function main() {
   console.log("popup main");
   m.route.mode = "hash";
@@ -48,15 +56,19 @@ function makeTab(target, name) {
   return m("a", {config: m.route, href: target, "class": cssClass}, name);
 }
 
-var WalletNavBar = {
-  view() {
+namespace WalletNavBar {
+  export function view() {
     return m("div#header.nav", [
       makeTab("/balance", i18n`Balance`),
       makeTab("/history", i18n`History`),
       makeTab("/debug", i18n`Debug`),
     ]);
   }
-};
+
+  export function controller() {
+    // empty
+  }
+}
 
 
 function openInExtension(element, isInitialized) {
@@ -68,20 +80,32 @@ function openInExtension(element, isInitialized) {
   });
 }
 
-var WalletBalance = {
-  controller() {
-    var myWallet;
-    m.startComputation();
-    chrome.runtime.sendMessage({type: "balances"}, (wallet) => {
-      console.log("got wallet", wallet);
-      myWallet = wallet;
-      m.endComputation();
-    });
-    return () => myWallet;
-  },
+namespace WalletBalance {
+  export function controller() {
+    return new Controller();
+  }
 
-  view(getWallet) {
-    let wallet = getWallet();
+  class Controller {
+    myWallet;
+
+    constructor() {
+      this.updateBalance();
+
+      onUpdateNotification(() => this.updateBalance());
+    }
+
+    updateBalance() {
+      m.startComputation();
+      chrome.runtime.sendMessage({type: "balances"}, (wallet) => {
+        console.log("got wallet", wallet);
+        this.myWallet = wallet;
+        m.endComputation();
+      });
+    }
+  }
+
+  export function view(ctrl: Controller) {
+    let wallet = ctrl.myWallet;
     if (!wallet) {
       throw Error("Could not retrieve wallet");
     }
@@ -94,7 +118,7 @@ var WalletBalance = {
                  i18n`free KUDOS`);
     return i18n.parts`You have no balance to show. Want to get some ${link}?`;
   }
-};
+}
 
 
 function formatTimestamp(t) {
@@ -152,20 +176,31 @@ function formatHistoryItem(historyItem) {
 }
 
 
-var WalletHistory = {
-  controller() {
-    var myHistory;
-    m.startComputation();
-    chrome.runtime.sendMessage({type: "get-history"}, (wallet) => {
-      console.log("got history", history);
-      myHistory = wallet;
-      m.endComputation();
-    });
-    return () => myHistory;
-  },
+namespace WalletHistory {
+  export function controller() {
+    return new Controller();
+  }
 
-  view(getHistory) {
-    let history = getHistory();
+  class Controller {
+    myHistory;
+
+    constructor() {
+      this.update();
+      onUpdateNotification(() => this.update());
+    }
+
+    update() {
+      m.startComputation();
+      chrome.runtime.sendMessage({type: "get-history"}, (resp) => {
+        console.log("got history", history);
+        this.myHistory = resp;
+        m.endComputation();
+      });
+    }
+  }
+
+  export function view(ctrl: Controller) {
+    let history = ctrl.myHistory;
     if (!history) {
       throw Error("Could not retrieve history");
     }
@@ -175,7 +210,7 @@ var WalletHistory = {
     }
     return i18n`Your wallet has no events recorded.`;
   }
-};
+}
 
 
 function reload() {