From a16589a5d93fe0767973a8e12e9bdd7e6d8ad55e Mon Sep 17 00:00:00 2001
From: Marcello Stanisci <marcello.stanisci@inria.fr>
Date: Wed, 16 Dec 2015 17:52:25 +0100
Subject: [PATCH] Making the balance appear

---
 extension/lib/commonHelpers.js        | 15 +++++++++++++++
 extension/pages/confirm-contract.html |  1 +
 extension/popup/balance-overview.html | 11 +++++------
 extension/popup/balance-overview.js   |  9 +++++----
 extension/popup/balance-overview.tsx  |  9 +++++----
 extension/popup/reserves.html         |  2 +-
 extension/popup/transactions.html     |  2 +-
 7 files changed, 33 insertions(+), 16 deletions(-)
 create mode 100644 extension/lib/commonHelpers.js

diff --git a/extension/lib/commonHelpers.js b/extension/lib/commonHelpers.js
new file mode 100644
index 000000000..95faf1112
--- /dev/null
+++ b/extension/lib/commonHelpers.js
@@ -0,0 +1,15 @@
+"use strict";
+
+Handlebars.registerHelper('prettyAmount', function (amount) {
+    let v = amount.value + amount.fraction / 10e6;
+    return v.toFixed(2) + " " + amount.currency;
+});
+
+Handlebars.registerHelper('prettyAmountNoCurrency', function (amount) {
+    let v = amount.value + amount.fraction / 10e6;
+    return v.toFixed(2);
+});
+
+Handlebars.registerHelper('objectStringifier', function (o) {
+  return JSON.stringify(o);
+});
diff --git a/extension/pages/confirm-contract.html b/extension/pages/confirm-contract.html
index af6d9bca0..737ba6de3 100644
--- a/extension/pages/confirm-contract.html
+++ b/extension/pages/confirm-contract.html
@@ -5,6 +5,7 @@
     <title>Taler Wallet: Confirm Reserve Creation</title>
     <script src="../lib/URI.js"></script>
     <script src="../lib/handlebars-v4.0.5.js"></script>
+    <script src="../lib/commonHelpers.js"></script>
     <script src="confirm-contract.js"></script>
     <link rel="stylesheet" type="text/css" href="../style/wallet.css"> 
 
diff --git a/extension/popup/balance-overview.html b/extension/popup/balance-overview.html
index 7c0674c1e..2f82becf8 100644
--- a/extension/popup/balance-overview.html
+++ b/extension/popup/balance-overview.html
@@ -6,14 +6,13 @@
     <link rel="stylesheet" href="popup.css" type="text/css">
     <script src="../lib/util.js" type="text/javascript"></script>
     <script src="../lib/handlebars-v4.0.5.js"></script>
+    <script src="../lib/commonHelpers.js"></script>
     <script src="balance-overview.js" type="text/javascript"></script>
-
+    
     <script id="balance-template" type="text/x-handlebars-template">
-      <div>
-          {{#each this}}
-          <p>{{this.value + this.fraction / 10e6 + <a> this.currency}}</a></p> 
-	  {{/each}}
-      </div>
+	{{#each this}}
+          <p>{{prettyAmountNoCurrency this}} <a>{{@key}}</a></p>
+	{{/each}}
     </script>
 
   </head>
diff --git a/extension/popup/balance-overview.js b/extension/popup/balance-overview.js
index 0df0dae9f..f33be0637 100644
--- a/extension/popup/balance-overview.js
+++ b/extension/popup/balance-overview.js
@@ -19,16 +19,17 @@ document.addEventListener('DOMContentLoaded', (e) => {
     chrome.runtime.sendMessage({ type: "balances" }, function (wallet) {
         console.log("got balance");
         let n = 0;
-        /*let table = <div />;*/
+        let table = React.createElement("div", null);
         let source = document.getElementById("balance-template").innerHTML;
         console.log("size", Object.keys(wallet).length);
         if (Object.keys(wallet).length > 0) {
             let template = Handlebars.compile(source);
-            console.log("DB error? ", chrome.runtime.lastError);
             console.log("wallet ", JSON.stringify(wallet));
-            let html = template({ wallet: wallet, walletEmpty: wallet.length == 0 });
+            let html = template(wallet);
             console.log("Hb generated html", html);
-            document.getElementById("content").innerHTML = html;
+            table.innerHTML = html;
+            let p = document.getElementById("content");
+            p.replaceChild(table, p.firstElementChild);
         }
         /*
         for (let curr in wallet) {
diff --git a/extension/popup/balance-overview.tsx b/extension/popup/balance-overview.tsx
index 9435918f3..b1ee0fa27 100644
--- a/extension/popup/balance-overview.tsx
+++ b/extension/popup/balance-overview.tsx
@@ -21,17 +21,18 @@ document.addEventListener('DOMContentLoaded', (e) => {
   chrome.runtime.sendMessage({type: "balances"}, function(wallet) {
     console.log("got balance");
     let n = 0;
-    /*let table = <div />;*/
+    let table = <div />;
     
     let source = document.getElementById("balance-template").innerHTML;
     console.log("size", Object.keys(wallet).length);
     if (Object.keys(wallet).length > 0){
       let template = Handlebars.compile(source);
-      console.log("DB error? ", chrome.runtime.lastError);
       console.log("wallet ", JSON.stringify(wallet));
-      let html = template({wallet: wallet, walletEmpty: wallet.length == 0});
+      let html = template(wallet);
       console.log("Hb generated html", html);
-      document.getElementById("content").innerHTML = html;
+      table.innerHTML = html;
+      let p = document.getElementById("content");
+      p.replaceChild(table, p.firstElementChild);
     }
 
     /*
diff --git a/extension/popup/reserves.html b/extension/popup/reserves.html
index d5b5a1862..0785cb5ca 100644
--- a/extension/popup/reserves.html
+++ b/extension/popup/reserves.html
@@ -8,7 +8,7 @@
 
   <body>
     <div id="header" class="nav">
-      <a href="wallet.html">Wallet</a>
+      <a href="balance-overview.html">Wallet</a>
       <a href="transactions.html">Transactions</a>
       <a href="reserves.html" class="active">Reserves</a>
     </div>
diff --git a/extension/popup/transactions.html b/extension/popup/transactions.html
index f51f64cf0..87e3ec445 100644
--- a/extension/popup/transactions.html
+++ b/extension/popup/transactions.html
@@ -10,7 +10,7 @@
 
   <body>
     <div id="header" class="nav">
-      <a href="wallet.html">Wallet</a>
+      <a href="balance-overview.html">Wallet</a>
       <a href="transactions.html" class="active">Transactions</a>
       <a href="reserves.html">Reserves</a>
     </div>