suggest mint based on currency (stub)

extension/content_scripts/notify.js

@@ -44,6 +44,8 @@ var TalerNotify;
         var params = {
             amount: JSON.stringify(e.detail.amount),
             callback_url: URI(e.detail.callback_url).absoluteTo(document.location.href),
+            bank_url: document.location.href,
+            suggested_mint: e.detail.suggested_mint,
         };
         var uri = URI(chrome.extension.getURL("pages/confirm-create-reserve.html"));
         document.location.href = uri.query(params).href();

extension/content_scripts/notify.ts

@@ -53,6 +53,8 @@ namespace TalerNotify {
     let params = {
       amount: JSON.stringify(e.detail.amount),
       callback_url: URI(e.detail.callback_url).absoluteTo(document.location.href),
+      bank_url: document.location.href,
+      suggested_mint: e.detail.suggested_mint,
     };
     let uri = URI(chrome.extension.getURL("pages/confirm-create-reserve.html"));
     document.location.href = uri.query(params).href();

extension/lib/module-trampoline.js

@@ -30,6 +30,16 @@ System.config({
   defaultJSExtensions: true,
 });
 
+
+// Register mithril as a module,
+// but only if it is ambient.
+if (m) {
+  let mod = System.newModule({default: m});
+  let modName = "mithril";
+  System.set(modName, mod);
+}
+
+
 let me = window.location.protocol
   + "//" + window.location.host
   + window.location.pathname.replace(/[.]html$/, ".js");

extension/lib/wallet/wxmessaging.js

@@ -144,6 +144,7 @@ System.register(["./wallet", "./db", "./http"], function(exports_1, context_1) {
                     return handlers[req.type](db, req.detail, onresponse);
                 }
                 console.error("Request type " + JSON.stringify(req) + " unknown, req " + req.type);
+                onresponse({ error: "request unknown" });
                 return false;
             });
         })

extension/lib/wallet/wxmessaging.ts

@@ -29,6 +29,7 @@ import {BrowserHttpLib} from "./http";
  * @author Florian Dold
  */
 
+
 function makeHandlers(wallet: Wallet) {
   return {
     ["balances"]: function(db, detail, sendResponse) {
@@ -162,6 +163,7 @@ export function wxMain() {
             return handlers[req.type](db, req.detail, onresponse);
           }
           console.error(`Request type ${JSON.stringify(req)} unknown, req ${req.type}`);
+          onresponse({error: "request unknown"});
           return false;
         });
     })

extension/pages/confirm-create-reserve.html

@@ -24,7 +24,7 @@
 <section id="main">
 
   <article>
-    <div id="mint-selection"></div>
+    <div class="fade" id="mint-selection"></div>
   </article>
 
 </section>

extension/pages/confirm-create-reserve.js

@@ -13,46 +13,71 @@
  You should have received a copy of the GNU General Public License along with
  TALER; see the file COPYING.  If not, If not, see <http://www.gnu.org/licenses/>
  */
-System.register(["../lib/wallet/helpers", "../lib/wallet/types"], function(exports_1, context_1) {
+System.register(["../lib/wallet/helpers", "../lib/wallet/types", "mithril"], function(exports_1, context_1) {
     "use strict";
     var __moduleName = context_1 && context_1.id;
-    var helpers_1, types_1;
+    var helpers_1, types_1, mithril_1;
     var DelayTimer, Controller;
+    function view(ctrl) {
+        var controls = [];
+        var mx = function (x) {
+            var args = [];
+            for (var _i = 1; _i < arguments.length; _i++) {
+                args[_i - 1] = arguments[_i];
+            }
+            return controls.push(mithril_1.default.apply(void 0, [x].concat(args)));
+        };
+        mx("p", (_a = ["The bank wants to create a reserve over ", "."], _a.raw = ["The bank wants to create a reserve over ", "."], i18n(_a, helpers_1.amountToPretty(ctrl.amount))));
+        mx("input", {
+            className: "url",
+            type: "text",
+            spellcheck: false,
+            value: ctrl.url(),
+            oninput: mithril_1.default.withAttr("value", ctrl.onUrlChanged.bind(ctrl)),
+        });
+        mx("button", {
+            onclick: function () { return ctrl.confirmReserve(ctrl.url(), ctrl.amount, ctrl.callbackUrl); },
+            disabled: !ctrl.isValidMint
+        }, "Confirm mint selection");
+        if (ctrl.statusString) {
+            mx("p", ctrl.statusString);
+        }
+        else {
+            mx("p", "Checking URL, please wait ...");
+        }
+        return mithril_1.default("div", controls);
+        var _a;
+    }
+    function getSuggestedMint(currency) {
+        // TODO: make this request go to the wallet backend
+        // Right now, this is a stub.
+        var defaultMint = {
+            "KUDOS": "http://mint.test.taler.net"
+        };
+        var mint = defaultMint[currency];
+        if (!mint) {
+            mint = "";
+        }
+        return Promise.resolve(mint);
+    }
     function main() {
         var url = URI(document.location.href);
         var query = URI.parseQuery(url.query());
         var amount = types_1.AmountJson.checked(JSON.parse(query.amount));
         var callback_url = query.callback_url;
-        var MintSelection = {
+        var bank_url = query.bank_url;
-            controller: function () { return new Controller(); },
+        getSuggestedMint(amount.currency)
-            view: function (ctrl) {
+            .then(function (suggestedMintUrl) {
-                var controls = [];
+            var controller = function () { return new Controller(suggestedMintUrl, amount, callback_url); };
-                var mx = function () {
+            var MintSelection = { controller: controller, view: view };
-                    var args = [];
+            mithril_1.default.mount(document.getElementById("mint-selection"), MintSelection);
-                    for (var _i = 0; _i < arguments.length; _i++) {
+        })
-                        args[_i - 0] = arguments[_i];
+            .catch(function (e) {
-                    }
+            // TODO: provide more context information, maybe factor it out into a
-                    return controls.push(m.apply(void 0, args));
+            // TODO:generic error reporting function or component.
-                };
+            document.body.innerText = "Fatal error: \"" + e.message + "\".";
-                mx("p", (_a = ["The bank wants to create a reserve over ", "."], _a.raw = ["The bank wants to create a reserve over ", "."], i18n(_a, helpers_1.amountToPretty(amount))));
+            console.error("got backend error \"" + e.message + "\"");
-                mx("input.url", {
+        });
-                    type: "text",
-                    spellcheck: false,
-                    oninput: m.withAttr("value", ctrl.onUrlChanged.bind(ctrl)),
-                });
-                if (ctrl.isValidMint) {
-                    mx("button", {
-                        onclick: function () { return ctrl.confirmReserve(ctrl.url, amount, callback_url); }
-                    }, "Confirm mint selection");
-                }
-                if (ctrl.errorString) {
-                    mx("p", ctrl.errorString);
-                }
-                return m("div", controls);
-                var _a;
-            }
-        };
-        m.mount(document.getElementById("mint-selection"), MintSelection);
     }
     exports_1("main", main);
     return {
@@ -62,6 +87,9 @@ System.register(["../lib/wallet/helpers", "../lib/wallet/types"], function(expor
             },
             function (types_1_1) {
                 types_1 = types_1_1;
+            },
+            function (mithril_1_1) {
+                mithril_1 = mithril_1_1;
             }],
         execute: function() {
             "use strict";
@@ -77,39 +105,48 @@ System.register(["../lib/wallet/helpers", "../lib/wallet/types"], function(expor
                 }
                 DelayTimer.prototype.bump = function () {
                     var _this = this;
-                    if (this.timerId !== null) {
+                    this.stop();
-                        window.clearTimeout(this.timerId);
-                    }
                     var handler = function () {
                         _this.f();
                     };
                     this.timerId = window.setTimeout(handler, this.ms);
                 };
+                DelayTimer.prototype.stop = function () {
+                    if (this.timerId !== null) {
+                        window.clearTimeout(this.timerId);
+                    }
+                };
                 return DelayTimer;
             }());
             Controller = (function () {
-                function Controller() {
+                function Controller(initialMintUrl, amount, callbackUrl) {
                     var _this = this;
-                    this.url = null;
+                    this.url = mithril_1.default.prop();
-                    this.errorString = null;
+                    this.statusString = null;
                     this.isValidMint = false;
-                    this.update();
+                    this.amount = amount;
+                    this.callbackUrl = callbackUrl;
                     this.timer = new DelayTimer(800, function () { return _this.update(); });
+                    this.url(initialMintUrl);
+                    this.update();
                 }
                 Controller.prototype.update = function () {
                     var _this = this;
+                    this.timer.stop();
                     var doUpdate = function () {
-                        if (!_this.url) {
+                        if (!_this.url()) {
-                            _this.errorString = (_a = ["Please enter a URL"], _a.raw = ["Please enter a URL"], i18n(_a));
+                            _this.statusString = (_a = ["Please enter a URL"], _a.raw = ["Please enter a URL"], i18n(_a));
+                            mithril_1.default.endComputation();
                             return;
                         }
-                        _this.errorString = null;
+                        _this.statusString = null;
-                        var parsedUrl = URI(_this.url);
+                        var parsedUrl = URI(_this.url());
                         if (parsedUrl.is("relative")) {
-                            _this.errorString = (_b = ["The URL you've entered is not valid (must be absolute)"], _b.raw = ["The URL you've entered is not valid (must be absolute)"], i18n(_b));
+                            _this.statusString = (_b = ["The URL you've entered is not valid (must be absolute)"], _b.raw = ["The URL you've entered is not valid (must be absolute)"], i18n(_b));
+                            mithril_1.default.endComputation();
                             return;
                         }
-                        var keysUrl = URI("/keys").absoluteTo(helpers_1.canonicalizeBaseUrl(_this.url));
+                        var keysUrl = URI("/keys").absoluteTo(helpers_1.canonicalizeBaseUrl(_this.url()));
                         console.log("requesting keys from '" + keysUrl + "'");
                         _this.request = new XMLHttpRequest();
                         _this.request.onreadystatechange = function () {
@@ -117,33 +154,33 @@ System.register(["../lib/wallet/helpers", "../lib/wallet/types"], function(expor
                                 switch (_this.request.status) {
                                     case 200:
                                         _this.isValidMint = true;
+                                        _this.statusString = "The mint base URL is valid!";
                                         break;
                                     case 0:
-                                        _this.errorString = "unknown request error";
+                                        _this.statusString = "unknown request error";
                                         break;
                                     default:
-                                        _this.errorString = "request failed with status " + _this.request.status;
+                                        _this.statusString = "request failed with status " + _this.request.status;
                                         break;
                                 }
-                                m.redraw();
                             }
+                            mithril_1.default.endComputation();
                         };
                         _this.request.open("get", keysUrl.href());
                         _this.request.send();
                         var _a, _b;
                     };
+                    mithril_1.default.startComputation();
                     doUpdate();
-                    m.redraw();
                     console.log("got update");
                 };
                 Controller.prototype.reset = function () {
                     this.isValidMint = false;
-                    this.errorString = null;
+                    this.statusString = null;
                     if (this.request) {
                         this.request.abort();
                         this.request = null;
                     }
-                    m.redraw();
                 };
                 Controller.prototype.confirmReserve = function (mint, amount, callback_url) {
                     var _this = this;
@@ -170,7 +207,7 @@ System.register(["../lib/wallet/helpers", "../lib/wallet/types"], function(expor
                         }
                         else {
                             _this.reset();
-                            _this.errorString = ("Oops, something went wrong." +
+                            _this.statusString = ("Oops, something went wrong." +
                                 ("The wallet responded with error status (" + rawResp.error + ")."));
                         }
                     };
@@ -178,7 +215,7 @@ System.register(["../lib/wallet/helpers", "../lib/wallet/types"], function(expor
                 };
                 Controller.prototype.onUrlChanged = function (url) {
                     this.reset();
-                    this.url = url;
+                    this.url(url);
                     this.timer.bump();
                 };
                 return Controller;

extension/pages/confirm-create-reserve.tsx

@@ -14,14 +14,14 @@
  TALER; see the file COPYING.  If not, If not, see <http://www.gnu.org/licenses/>
  */
 
+/// <reference path="../lib/decl/mithril.d.ts" />
+
 import {amountToPretty, canonicalizeBaseUrl} from "../lib/wallet/helpers";
 import {AmountJson, CreateReserveResponse} from "../lib/wallet/types";
+import m from "mithril";
 
 "use strict";
 
-declare var m: any;
-
-
 /**
  * Execute something after a delay, with the possibility
  * to reset the delay.
@@ -37,43 +37,55 @@ class DelayTimer {
   }
 
   bump() {
-    if (this.timerId !== null) {
+    this.stop();
-      window.clearTimeout(this.timerId);
-    }
     const handler = () => {
       this.f();
     };
     this.timerId = window.setTimeout(handler, this.ms);
   }
+
+  stop() {
+    if (this.timerId !== null) {
+      window.clearTimeout(this.timerId);
+    }
+  }
 }
 
 
 class Controller {
-  url = null;
+  url = m.prop<string>();
-  errorString = null;
+  statusString = null;
   isValidMint = false;
   private timer: DelayTimer;
   private request: XMLHttpRequest;
+  amount: AmountJson;
+  callbackUrl: string;
 
-  constructor() {
+  constructor(initialMintUrl: string, amount: AmountJson, callbackUrl: string) {
-    this.update();
+    this.amount = amount;
+    this.callbackUrl = callbackUrl;
     this.timer = new DelayTimer(800, () => this.update());
+    this.url(initialMintUrl);
+    this.update();
   }
 
-  update() {
+  private update() {
+    this.timer.stop();
     const doUpdate = () => {
-      if (!this.url) {
+      if (!this.url()) {
-        this.errorString = i18n`Please enter a URL`;
+        this.statusString = i18n`Please enter a URL`;
+        m.endComputation();
         return;
       }
-      this.errorString = null;
+      this.statusString = null;
-      let parsedUrl = URI(this.url);
+      let parsedUrl = URI(this.url());
       if (parsedUrl.is("relative")) {
-        this.errorString = i18n`The URL you've entered is not valid (must be absolute)`;
+        this.statusString = i18n`The URL you've entered is not valid (must be absolute)`;
+        m.endComputation();
         return;
       }
 
-      const keysUrl = URI("/keys").absoluteTo(canonicalizeBaseUrl(this.url));
+      const keysUrl = URI("/keys").absoluteTo(canonicalizeBaseUrl(this.url()));
 
       console.log(`requesting keys from '${keysUrl}'`);
 
@@ -83,34 +95,36 @@ class Controller {
           switch (this.request.status) {
             case 200:
               this.isValidMint = true;
+              this.statusString = "The mint base URL is valid!";
               break;
             case 0:
-              this.errorString = `unknown request error`;
+              this.statusString = `unknown request error`;
               break;
             default:
-              this.errorString = `request failed with status ${this.request.status}`;
+              this.statusString = `request failed with status ${this.request.status}`;
               break;
           }
-          m.redraw();
         }
+        m.endComputation();
       };
       this.request.open("get", keysUrl.href());
       this.request.send();
     };
 
+    m.startComputation();
     doUpdate();
-    m.redraw();
+
+
     console.log("got update");
   }
 
   reset() {
     this.isValidMint = false;
-    this.errorString = null;
+    this.statusString = null;
     if (this.request) {
       this.request.abort();
       this.request = null;
     }
-    m.redraw();
   }
 
   confirmReserve(mint: string, amount: AmountJson, callback_url: string) {
@@ -136,7 +150,7 @@ class Controller {
         document.location.href = url.href();
       } else {
         this.reset();
-        this.errorString = (
+        this.statusString = (
         `Oops, something went wrong.` +
         `The wallet responded with error status (${rawResp.error}).`);
       }
@@ -146,50 +160,80 @@ class Controller {
 
   onUrlChanged(url: string) {
     this.reset();
-    this.url = url;
+    this.url(url);
     this.timer.bump();
   }
 }
 
 
+function view(ctrl: Controller) {
+  let controls = [];
+  let mx = (x: string, ...args) => controls.push(m(x, ...args));
+
+  mx("p",
+     i18n`The bank wants to create a reserve over ${amountToPretty(
+       ctrl.amount)}.`);
+  mx("input",
+     {
+       className: "url",
+       type: "text",
+       spellcheck: false,
+       value: ctrl.url(),
+       oninput: m.withAttr("value", ctrl.onUrlChanged.bind(ctrl)),
+     });
+
+  mx("button", {
+       onclick: () => ctrl.confirmReserve(ctrl.url(),
+                                          ctrl.amount,
+                                          ctrl.callbackUrl),
+       disabled: !ctrl.isValidMint
+     },
+     "Confirm mint selection");
+
+  if (ctrl.statusString) {
+    mx("p", ctrl.statusString);
+  } else {
+    mx("p", "Checking URL, please wait ...");
+  }
+
+  return m("div", controls);
+}
+
+
+function getSuggestedMint(currency: string): Promise<string> {
+  // TODO: make this request go to the wallet backend
+  // Right now, this is a stub.
+  const defaultMint = {
+    "KUDOS": "http://mint.test.taler.net"
+  };
+
+  let mint = defaultMint[currency];
+
+  if (!mint) {
+    mint = ""
+  }
+
+  return Promise.resolve(mint);
+}
+
+
 export function main() {
   const url = URI(document.location.href);
   const query: any = URI.parseQuery(url.query());
   const amount = AmountJson.checked(JSON.parse(query.amount));
   const callback_url = query.callback_url;
+  const bank_url = query.bank_url;
 
-  var MintSelection = {
+  getSuggestedMint(amount.currency)
-    controller: () => new Controller(),
+    .then((suggestedMintUrl) => {
-    view(ctrl: Controller) {
+      const controller = () => new Controller(suggestedMintUrl, amount, callback_url);
-      let controls = [];
+      var MintSelection = {controller, view};
-      let mx = (...args) => controls.push(m(...args));
+      m.mount(document.getElementById("mint-selection"), MintSelection);
-
+    })
-      mx("p",
+    .catch((e) => {
-         i18n`The bank wants to create a reserve over ${amountToPretty(
+      // TODO: provide more context information, maybe factor it out into a
-           amount)}.`);
+      // TODO:generic error reporting function or component.
-      mx("input.url",
+      document.body.innerText = `Fatal error: "${e.message}".`;
-         {
+      console.error(`got backend error "${e.message}"`);
-           type: "text",
+    });
-           spellcheck: false,
-           oninput: m.withAttr("value", ctrl.onUrlChanged.bind(ctrl)),
-         });
-
-      if (ctrl.isValidMint) {
-        mx("button", {
-             onclick: () => ctrl.confirmReserve(ctrl.url,
-                                                amount,
-                                                callback_url)
-           },
-           "Confirm mint selection");
-      }
-
-      if (ctrl.errorString) {
-        mx("p", ctrl.errorString);
-      }
-
-      return m("div", controls);
-    }
-  };
-
-  m.mount(document.getElementById("mint-selection"), MintSelection);
 }

extension/style/wallet.css

@@ -101,3 +101,19 @@ button {
     font-size: 120%;
     padding: 0.5em;
 }
+
+/* We use fading to hide slower DOM updates */
+.fade {
+    -webkit-animation: fade 0.7s;
+    animation: fade 0.7s;
+    opacity: 1;
+}
+
+@-webkit-keyframes fade {
+    from {opacity: 0}
+    to {opacity: 1}
+}
+@keyframes fade {
+     from {opacity: 0}
+     to {opacity: 1}
+ }