missing files

extension/background/emscriptif.js

@@ -360,8 +360,11 @@ class EccSignaturePurpose extends PackedArenaObject {
     size() { return this.payloadSize + 8; }
 }
 class SignatureStruct {
-    constructor() {
+    constructor(x) {
         this.members = {};
+        for (let k in x) {
+            this.set(k[0], k[1]);
+        }
     }
     toPurpose(a) {
         let totalSize = 0;
@@ -401,6 +404,9 @@ class SignatureStruct {
     }
 }
 class WithdrawRequestPS extends SignatureStruct {
+    constructor(w) {
+        super(w);
+    }
     purpose() { return SignaturePurpose.RESERVE_WITHDRAW; }
     fieldTypes() {
         return [

extension/background/emscriptif.ts

@@ -516,6 +516,13 @@ abstract class SignatureStruct {
   abstract fieldTypes(): Array<any>;
   abstract purpose(): SignaturePurpose;
   private members: any = {};
+
+  constructor(x: any) {
+    for (let k in x) {
+      this.set(k[0], k[1]);
+    }
+  }
+
   toPurpose(a?: Arena): EccSignaturePurpose {
     let totalSize = 0;
     for (let f of this.fieldTypes()) {
@@ -541,7 +548,7 @@ abstract class SignatureStruct {
     return x;
   }
 
-  set(name: string, value: PackedArenaObject) {
+  protected set(name: string, value: PackedArenaObject) {
     let typemap: any = {}
     for (let f of this.fieldTypes()) {
       typemap[f[0]] = f[1];
@@ -557,7 +564,20 @@ abstract class SignatureStruct {
 }
 
 
+// It's redundant, but more type safe.
+interface WithdrawRequestPS_Args {
+  reserve_pub: EddsaPublicKey;
+  amount_with_fee: AmountNbo;
+  withdraw_fee: AmountNbo;
+  h_denomination_pub: HashCode;
+  h_coin_envelope: HashCode;
+}
+
+
 class WithdrawRequestPS extends SignatureStruct {
+  constructor(w: WithdrawRequestPS_Args) {
+    super(w);
+  }
   purpose() { return SignaturePurpose.RESERVE_WITHDRAW; }
   fieldTypes() {
     return [

extension/background/wallet.js

@@ -136,12 +136,13 @@ function withdrawPrepare(db, denom, reserve) {
     amountWithFee.add(new Amount(denom.fee_withdraw));
     let withdrawFee = new Amount(denom.fee_withdraw);
     // Signature
-    let withdrawRequest = new WithdrawRequestPS();
-    withdrawRequest.set("reserve_pub", reservePub);
-    withdrawRequest.set("amount_with_fee", amountWithFee.toNbo());
-    withdrawRequest.set("withdraw_fee", withdrawFee.toNbo());
-    withdrawRequest.set("h_denomination_pub", denomPub.encode().hash());
-    withdrawRequest.set("h_coin_envelope", ev.hash());
+    let withdrawRequest = new WithdrawRequestPS({
+        reserve_pub: reservePub,
+        amount_with_fee: amountWithFee.toNbo(),
+        withdraw_fee: withdrawFee.toNbo(),
+        h_denomination_pub: denomPub.encode().hash(),
+        h_coin_envelope: ev.hash()
+    });
     console.log("about to sign");
     var sig = eddsaSign(withdrawRequest.toPurpose(), reservePriv);
     console.log("signed");
@@ -392,12 +393,14 @@ function dumpDb(db, detail, sendResponse) {
     }
     return true;
 }
+// Just for debugging.
 function reset(db, detail, sendResponse) {
     let tx = db.transaction(db.objectStoreNames, 'readwrite');
     for (let i = 0; i < db.objectStoreNames.length; i++) {
         tx.objectStore(db.objectStoreNames[i]).clear();
     }
     indexedDB.deleteDatabase(DB_NAME);
+    chrome.browserAction.setBadgeText({ text: "" });
     console.log("reset done");
     return false;
 }

extension/background/wallet.ts

@@ -185,12 +185,14 @@ function withdrawPrepare(db: IDBDatabase, denom, reserve): Promise<PreCoin> {
   let withdrawFee = new Amount(denom.fee_withdraw);
 
   // Signature
-  let withdrawRequest = new WithdrawRequestPS();
-  withdrawRequest.set("reserve_pub", reservePub);
-  withdrawRequest.set("amount_with_fee", amountWithFee.toNbo());
-  withdrawRequest.set("withdraw_fee", withdrawFee.toNbo());
-  withdrawRequest.set("h_denomination_pub", denomPub.encode().hash());
-  withdrawRequest.set("h_coin_envelope", ev.hash());
+  let withdrawRequest = new WithdrawRequestPS({
+    reserve_pub: reservePub,
+    amount_with_fee: amountWithFee.toNbo(),
+    withdraw_fee: withdrawFee.toNbo(),
+    h_denomination_pub: denomPub.encode().hash(),
+    h_coin_envelope: ev.hash()
+  });
+
   console.log("about to sign");
   var sig = eddsaSign(withdrawRequest.toPurpose(), reservePriv);
   console.log("signed");

extension/content_scripts/notify.js

@@ -18,6 +18,11 @@ document.addEventListener("DOMContentLoaded", function(e) {
     document.body.dispatchEvent(evt);
     console.log("bank handshake done");
   });
+  document.body.addEventListener('taler-checkout-probe', function(e) {
+    let evt = new Event('taler-wallet-present');
+    document.body.dispatchEvent(evt);
+    console.log("merchant handshake done");
+  });
   document.body.addEventListener('taler-create-reserve', function(e) {
     let $ = (x) => document.getElementById(x);
     console.log("taler-create-reserve with " + JSON.stringify(e.detail));
@@ -37,6 +42,15 @@ document.addEventListener("DOMContentLoaded", function(e) {
     let uri = URI(chrome.extension.getURL("pages/confirm-create-reserve.html"));
     document.location.href = uri.query(params).href();
   });
+  document.body.addEventListener('taler-contract', function(e) {
+    // XXX: the merchant should just give us the parsed data ...
+    let contract = JSON.parse(e.detail);
+    let uri = URI(chrome.extension.getURL("pages/confirm-contract.html"));
+    let params = {
+      contract: JSON.stringify(contract)
+    }
+    document.location.href = uri.query(params).href();
+  });
 });
 
 console.log("Taler wallet: content page loaded");

extension/decl/handlebars/handlebars-1.0.0.d.ts

@@ -0,0 +1,184 @@
+// Type definitions for Handlebars 1.0
+// Project: http://handlebarsjs.com/
+// Definitions by: Boris Yankov <https://github.com/borisyankov/>
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+
+// Use either HandlebarsStatic or HandlebarsRuntimeStatic
+declare var Handlebars: HandlebarsStatic;
+//declare var Handlebars: HandlebarsRuntimeStatic;
+
+/**
+* Implement this interface on your MVW/MVVM/MVC views such as Backbone.View
+**/
+interface HandlebarsTemplatable {
+    template: HandlebarsTemplateDelegate;
+}
+
+interface HandlebarsTemplateDelegate {
+    (context: any, options?: any): string;
+}
+
+interface HandlebarsCommon {
+    registerHelper(name: string, fn: Function, inverse?: boolean): void;
+    registerPartial(name: string, str: any): void;
+    K(): void;
+    createFrame(object: any): any;
+
+    Exception(message: string): void;
+    SafeString: typeof hbs.SafeString;
+    Utils: typeof hbs.Utils;
+
+    logger: Logger;
+    log(level: number, obj: any): void;
+}
+
+interface HandlebarsStatic extends HandlebarsCommon {
+    parse(input: string): hbs.AST.ProgramNode;
+    compile(input: any, options?: any): HandlebarsTemplateDelegate;
+}
+
+interface HandlebarsTemplates {
+    [index: string]: HandlebarsTemplateDelegate;
+}
+
+interface HandlebarsRuntimeStatic extends HandlebarsCommon {
+    // Handlebars.templates is the default template namespace in precompiler.
+    templates: HandlebarsTemplates;
+}
+
+declare module hbs {
+    class SafeString {
+        constructor(str: string);
+        static toString(): string;
+    }
+
+    module Utils {
+        function escapeExpression(str: string): string;
+    }
+}
+
+interface Logger {
+    DEBUG: number;
+    INFO: number;
+    WARN: number;
+    ERROR: number;
+    level: number;
+
+    methodMap: { [level: number]: string };
+
+    log(level: number, obj: string): void;
+}
+
+declare module hbs {
+    module AST {
+        interface IStripInfo {
+            left?: boolean;
+            right?: boolean;
+            inlineStandalone?: boolean;
+        }
+
+        class NodeBase {
+            firstColumn: number;
+            firstLine: number;
+            lastColumn: number;
+            lastLine: number;
+            type: string;
+        }
+
+        class ProgramNode extends NodeBase {
+            statements: NodeBase[];
+        }
+
+        class IdNode extends NodeBase {
+            original: string;
+            parts: string[];
+            string: string;
+            depth: number;
+            idName: string;
+            isSimple: boolean;
+            stringModeValue: string;
+        }
+
+        class HashNode extends NodeBase {
+            pairs: {0: string;
+                    1: NodeBase}[];
+        }
+
+        class SexprNode extends NodeBase {
+            hash: HashNode;
+            id: NodeBase;
+            params: NodeBase[];
+            isHelper: boolean;
+            eligibleHelper: boolean;
+        }
+
+        class MustacheNode extends NodeBase {
+            strip: IStripInfo;
+            escaped: boolean;
+            sexpr: SexprNode;
+
+        }
+
+        class BlockNode extends NodeBase {
+            mustache: MustacheNode;
+            program: ProgramNode;
+            inverse: ProgramNode;
+            strip: IStripInfo;
+            isInverse: boolean;
+        }
+
+        class PartialNameNode extends NodeBase {
+            name: string;
+        }
+
+        class PartialNode extends NodeBase {
+            partialName: PartialNameNode;
+            context: NodeBase;
+            hash: HashNode;
+            strip: IStripInfo;
+        }
+
+        class RawBlockNode extends NodeBase {
+            mustache: MustacheNode;
+            program: ProgramNode;
+        }
+
+        class ContentNode extends NodeBase {
+            original: string;
+            string: string;
+        }
+
+        class DataNode extends NodeBase {
+            id: IdNode;
+            stringModeValue: string;
+            idName: string;
+        }
+
+        class StringNode extends NodeBase {
+            original: string;
+            string: string;
+            stringModeValue: string;
+        }
+
+        class NumberNode extends NodeBase {
+            original: string;
+            number: string;
+            stringModeValue: number;
+        }
+
+        class BooleanNode extends NodeBase {
+            bool: string;
+            stringModeValue: boolean;
+        }
+
+        class CommentNode extends NodeBase {
+            comment: string;
+            strip: IStripInfo;
+        }
+    }
+}
+
+declare module "handlebars" {
+    export = Handlebars;
+}

extension/decl/handlebars/handlebars.d.ts

@@ -0,0 +1,227 @@
+// Type definitions for Handlebars v3.0.3
+// Project: http://handlebarsjs.com/
+// Definitions by: Boris Yankov <https://github.com/borisyankov/>
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+
+declare module Handlebars {
+    export function registerHelper(name: string, fn: Function, inverse?: boolean): void;
+    export function registerPartial(name: string, str: any): void;
+    export function unregisterHelper(name: string): void;
+    export function unregisterPartial(name: string): void;
+    export function K(): void;
+    export function createFrame(object: any): any;
+    export function Exception(message: string): void;
+    export function log(level: number, obj: any): void;
+    export function parse(input: string): hbs.AST.Program;
+    export function compile(input: any, options?: any): HandlebarsTemplateDelegate;
+
+    export var SafeString: typeof hbs.SafeString;
+    export var Utils: typeof hbs.Utils;
+    export var logger: Logger;
+    export var templates: HandlebarsTemplates;
+    export var helpers: any;
+
+    export module AST {
+        export var helpers: hbs.AST.helpers;
+    }
+
+    interface ICompiler {
+        accept(node: hbs.AST.Node): void;
+        Program(program: hbs.AST.Program): void;
+        BlockStatement(block: hbs.AST.BlockStatement): void;
+        PartialStatement(partial: hbs.AST.PartialStatement): void;
+        MustacheStatement(mustache: hbs.AST.MustacheStatement): void;
+        ContentStatement(content: hbs.AST.ContentStatement): void;
+        CommentStatement(comment?: hbs.AST.CommentStatement): void;
+        SubExpression(sexpr: hbs.AST.SubExpression): void;
+        PathExpression(path: hbs.AST.PathExpression): void;
+        StringLiteral(str: hbs.AST.StringLiteral): void;
+        NumberLiteral(num: hbs.AST.NumberLiteral): void;
+        BooleanLiteral(bool: hbs.AST.BooleanLiteral): void;
+        UndefinedLiteral(): void;
+        NullLiteral(): void;
+        Hash(hash: hbs.AST.Hash): void;
+    }
+
+    export class Visitor implements ICompiler {
+        accept(node: hbs.AST.Node): void;
+        acceptKey(node: hbs.AST.Node, name: string): void;
+        acceptArray(arr: hbs.AST.Expression[]): void;
+        Program(program: hbs.AST.Program): void;
+        BlockStatement(block: hbs.AST.BlockStatement): void;
+        PartialStatement(partial: hbs.AST.PartialStatement): void;
+        MustacheStatement(mustache: hbs.AST.MustacheStatement): void;
+        ContentStatement(content: hbs.AST.ContentStatement): void;
+        CommentStatement(comment?: hbs.AST.CommentStatement): void;
+        SubExpression(sexpr: hbs.AST.SubExpression): void;
+        PathExpression(path: hbs.AST.PathExpression): void;
+        StringLiteral(str: hbs.AST.StringLiteral): void;
+        NumberLiteral(num: hbs.AST.NumberLiteral): void;
+        BooleanLiteral(bool: hbs.AST.BooleanLiteral): void;
+        UndefinedLiteral(): void;
+        NullLiteral(): void;
+        Hash(hash: hbs.AST.Hash): void;
+    }
+}
+
+/**
+* Implement this interface on your MVW/MVVM/MVC views such as Backbone.View
+**/
+interface HandlebarsTemplatable {
+    template: HandlebarsTemplateDelegate;
+}
+
+interface HandlebarsTemplateDelegate {
+    (context: any, options?: any): string;
+}
+
+interface HandlebarsTemplates {
+    [index: string]: HandlebarsTemplateDelegate;
+}
+
+declare module hbs {
+    class SafeString {
+        constructor(str: string);
+        static toString(): string;
+    }
+
+    module Utils {
+        function escapeExpression(str: string): string;
+    }
+}
+
+interface Logger {
+    DEBUG: number;
+    INFO: number;
+    WARN: number;
+    ERROR: number;
+    level: number;
+
+    methodMap: { [level: number]: string };
+
+    log(level: number, obj: string): void;
+}
+
+declare module hbs {
+    module AST {
+        interface Node {
+            type: string;
+            loc: SourceLocation;
+        }
+
+        interface SourceLocation {
+            source: string;
+            start: Position;
+            end: Position;
+        }
+
+        interface Position {
+            line: number;
+            column: number;
+        }
+
+        interface Program extends Node {
+            body: Statement[];
+            blockParams: string[];
+        }
+
+        interface Statement extends Node {}
+
+        interface MustacheStatement extends Statement {
+            path: PathExpression | Literal;
+            params: Expression[];
+            hash: Hash;
+            escaped: boolean;
+            strip: StripFlags;
+        }
+
+        interface BlockStatement extends Statement {
+            path: PathExpression;
+            params: Expression[];
+            hash: Hash;
+            program: Program;
+            inverse: Program;
+            openStrip: StripFlags;
+            inverseStrip: StripFlags;
+            closeStrip: StripFlags;
+        }
+
+        interface PartialStatement extends Statement {
+            name: PathExpression | SubExpression;
+            params: Expression[];
+            hash: Hash;
+            indent: string;
+            strip: StripFlags;
+        }
+
+        interface ContentStatement extends Statement {
+            value: string;
+            original: StripFlags;
+        }
+
+        interface CommentStatement extends Statement {
+            value: string;
+            strip: StripFlags;
+        }
+
+        interface Expression extends Node {}
+
+        interface SubExpression extends Expression {
+            path: PathExpression;
+            params: Expression[];
+            hash: Hash;
+        }
+
+        interface PathExpression extends Expression {
+            data: boolean;
+            depth: number;
+            parts: string[];
+            original: string;
+        }
+
+        interface Literal extends Expression {}
+        interface StringLiteral extends Literal {
+            value: string;
+            original: string;
+        }
+
+        interface BooleanLiteral extends Literal {
+            value: boolean;
+            original: boolean;
+        }
+
+        interface NumberLiteral extends Literal {
+            value: number;
+            original: number;
+        }
+
+        interface UndefinedLiteral extends Literal {}
+
+        interface NullLiteral extends Literal {}
+
+        interface Hash extends Node {
+            pairs: HashPair[];
+        }
+
+        interface HashPair extends Node {
+            key: string;
+            value: Expression;
+        }
+
+        interface StripFlags {
+            open: boolean;
+            close: boolean;
+        }
+
+        interface helpers {
+            helperExpression(node: Node): boolean;
+            scopeId(path: PathExpression): boolean;
+            simpleId(path: PathExpression): boolean;
+        }
+    }
+}
+
+declare module "handlebars" {
+    export = Handlebars;
+}

extension/pages/confirm-contract.html

@@ -0,0 +1,38 @@
+<!doctype html>
+
+<html>
+  <head>
+    <title>Taler Wallet: Confirm Reserve Creation</title>
+    <script src="../lib/URI.js"></script>
+    <script src="../lib/handlebars-v4.0.5.js"></script>
+    <script src="confirm-contract.js"></script>
+    <link rel="stylesheet" type="text/css" href="../style/wallet.css"> 
+
+    <script id="contract-template" type="text/x-handlebars-template">
+      Hello, this is the wallet.  The merchant "{{merchant.name}}"
+      wants to enter a contract over {{prettyAmount amount}}
+      with you.
+
+      <p />
+
+      Your contract includes these products:
+      <ul>
+      {{#each products}}
+        <li>{{description}}<a href="foo">(more...)</a></li>
+      {{/each}}
+      </ul>
+
+      <p />
+    </script>
+
+
+  </head>
+  <body>
+    <h1>Confirm Payment</h1>
+
+    <div id="render-contract"></div>
+
+    <button id="confirm-purchase">Confirm Purchase!</button>
+    
+  </body>
+</html>

extension/pages/confirm-contract.js

@@ -0,0 +1,39 @@
+/// <reference path="../decl/handlebars/handlebars.d.ts" />
+"use strict";
+let url = URI(document.location.href);
+let query = URI.parseQuery(url.query());
+let $_ = (x) => document.getElementById(x);
+function renderContract(contract) {
+    let showAmount = document.getElementById("show-amount");
+    $_('merchant-name').innerText = contract.merchant.name;
+}
+function clone(obj) {
+    // This is faster than it looks ...
+    return JSON.parse(JSON.stringify(obj));
+}
+Handlebars.registerHelper('prettyAmount', function (amount) {
+    let v = amount.value + amount.fraction / 10e6;
+    return v.toFixed(2) + " " + amount.currency;
+});
+document.addEventListener("DOMContentLoaded", (e) => {
+    let contract = JSON.parse(query.contract);
+    console.dir(contract);
+    let source = $_("contract-template").innerHTML;
+    let template = Handlebars.compile(source);
+    let html = template(contract.contract);
+    $_("render-contract").innerHTML = html;
+    document.getElementById("confirm-purchase").addEventListener("click", (e) => {
+        let d = clone(query);
+        chrome.runtime.sendMessage({ type: 'confirm-purchase', detail: d }, (resp) => {
+            if (resp.success === true) {
+                document.location.href = resp.backlink;
+            }
+            else {
+                document.body.innerHTML =
+                    `Oops, something went wrong.
+           Here is some more info:
+           <pre>${resp.text}</pre>`;
+            }
+        });
+    });
+});

extension/pages/confirm-contract.tsx

@@ -0,0 +1,53 @@
+/// <reference path="../decl/handlebars/handlebars.d.ts" />
+"use strict";
+
+let url = URI(document.location.href);
+let query: any = URI.parseQuery(url.query());
+
+let $_ = (x) => document.getElementById(x);
+
+function renderContract(contract) {
+  let showAmount = document.getElementById("show-amount");
+  $_('merchant-name').innerText = contract.merchant.name;
+}
+
+function clone(obj) {
+  // This is faster than it looks ...
+  return JSON.parse(JSON.stringify(obj));
+}
+
+
+Handlebars.registerHelper('prettyAmount', function(amount) {
+  let v = amount.value + amount.fraction / 10e6;
+  return v.toFixed(2) + " " + amount.currency;
+});
+
+
+document.addEventListener("DOMContentLoaded", (e) => {
+  let contract = JSON.parse(query.contract);
+  console.dir(contract);
+
+  let source = $_("contract-template").innerHTML;
+  let template = Handlebars.compile(source);
+  let html = template(contract.contract);
+
+  $_("render-contract").innerHTML = html;
+
+
+  document.getElementById("confirm-purchase").addEventListener("click", (e) => {
+    let d = clone(query);
+    chrome.runtime.sendMessage({type:'confirm-purchase', detail: d}, (resp) => {
+      if (resp.success === true) {
+        document.location.href = resp.backlink;
+      } else {
+        document.body.innerHTML =
+          `Oops, something went wrong.
+           Here is some more info:
+           <pre>${resp.text}</pre>`;
+      }
+    });
+
+  });
+});
+
+

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>

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
+        });
+    });
+});

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
+    }); 
+  });
+});

extension/tsconfig.json

@@ -7,6 +7,7 @@
       "background/wallet.ts",
       "background/emscriptif.ts",
       "lib/util.ts",
-      "popup/balance-overview.tsx"
+      "popup/balance-overview.tsx",
+      "pages/confirm-contract.tsx"
     ]
 }