3 files changed, 127 insertions, 0 deletions
diff --git a/extension/popup/balance-overview.html b/extension/popup/balance-overview.html
new file mode 100644
index 000000000..9131bc710
--- /dev/null
+++ b/extension/popup/balance-overview.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="popup.css" type="text/css">
+    <script src="../lib/util.js" type="text/javascript"></script>
+    <script src="balance-overview.js" type="text/javascript"></script>
+  </head>
+
+  <body>
+    <div id="header" class="nav">
+      <a href="wallet.html" class="active">Wallet</a>
+      <a href="transactions.html">Transactions</a>
+      <a href="reserves.html">Reserves</a>
+      <button id="debug">Debug!</button>
+      <button id="reset">Reset!</button>
+    </div>
+
+    <div id="content">
+      <p id="balances">
+          Looks like your wallet is empty. Want to get some <a id="link-kudos" href="http://bank.demo.taler.net">KUDOS?</a>
+      </p>
+    </div>
+
+  </body>
+</html>
diff --git a/extension/popup/balance-overview.js b/extension/popup/balance-overview.js
new file mode 100644
index 000000000..e244e5c05
--- /dev/null
+++ b/extension/popup/balance-overview.js
@@ -0,0 +1,48 @@
+"use strict";
+let React = {
+    createElement: function (tag, props, ...children) {
+        let e = document.createElement(tag);
+        for (let k in props) {
+            e.setAttribute(k, props[k]);
+        }
+        for (let child of children) {
+            if ("string" === typeof child || "number" == typeof child) {
+                child = document.createTextNode(child);
+            }
+            e.appendChild(child);
+        }
+        return e;
+    }
+};
+document.addEventListener('DOMContentLoaded', (e) => {
+    console.log("content loaded");
+    chrome.runtime.sendMessage({ type: "balances" }, function (wallet) {
+        console.log("got balance");
+        let n = 0;
+        let table = React.createElement("div", null);
+        for (let curr in wallet) {
+            n++;
+            let x = wallet[curr];
+            let num = x.value + x.fraction / 10e6;
+            table.appendChild(React.createElement("p", null, num, " ", React.createElement("a", null, x.currency)));
+        }
+        if (n != 0) {
+            let p = document.getElementById("content");
+            p.replaceChild(table, p.firstElementChild);
+        }
+    });
+    document.getElementById("debug").addEventListener("click", (e) => {
+        chrome.tabs.create({
+            "url": chrome.extension.getURL("pages/debug.html")
+        });
+    });
+    document.getElementById("reset").addEventListener("click", (e) => {
+        chrome.runtime.sendMessage({ type: "reset" });
+    });
+    document.getElementById("link-kudos").addEventListener("click", (e) => {
+        let target = e.target;
+        chrome.tabs.create({
+            "url": target.href
+        });
+    });
+});
diff --git a/extension/popup/balance-overview.tsx b/extension/popup/balance-overview.tsx
new file mode 100644
index 000000000..de992a46d
--- /dev/null
+++ b/extension/popup/balance-overview.tsx
@@ -0,0 +1,52 @@
+"use strict";
+
+let React = {
+  createElement: function(tag, props, ...children) {
+    let e = document.createElement(tag);
+    for (let k in props) {
+      e.setAttribute(k, props[k]);
+    }
+    for (let child of children) {
+      if ("string" === typeof child || "number" == typeof child) {
+        child = document.createTextNode(child);
+      }
+      e.appendChild(child);
+    }
+    return e;
+  }
+}
+
+
+document.addEventListener('DOMContentLoaded', (e) => {
+  console.log("content loaded");
+  chrome.runtime.sendMessage({type: "balances"}, function(wallet) {
+    console.log("got balance");
+    let n = 0;
+    let table = <div />;
+    for (let curr in wallet) {
+      n++;
+      let x = wallet[curr];
+      let num = x.value + x.fraction / 10e6;
+      table.appendChild(<p>{num} <a>{x.currency}</a></p>);
+    }
+    if (n != 0) {
+      let p = document.getElementById("content");
+      p.replaceChild(table, p.firstElementChild);
+    }
+  });
+
+  document.getElementById("debug").addEventListener("click", (e) => {
+    chrome.tabs.create({
+      "url": chrome.extension.getURL("pages/debug.html")
+    }); 
+  });
+  document.getElementById("reset").addEventListener("click", (e) => {
+    chrome.runtime.sendMessage({type: "reset"});
+  });
+  document.getElementById("link-kudos").addEventListener("click", (e) => {
+    let target: any = e.target;
+    chrome.tabs.create({
+      "url": target.href
+    }); 
+  });
+});