From f3fb8be7db6de87dae40d41bd5597a735c800ca1 Mon Sep 17 00:00:00 2001 From: Florian Dold Date: Sun, 13 Nov 2016 23:30:18 +0100 Subject: restructuring --- src/pages/confirm-contract.html | 75 +++++++ src/pages/confirm-contract.tsx | 231 ++++++++++++++++++++ src/pages/confirm-create-reserve.html | 93 ++++++++ src/pages/confirm-create-reserve.tsx | 397 +++++++++++++++++++++++++++++++++ src/pages/debug.html | 13 ++ src/pages/help/empty-wallet.html | 30 +++ src/pages/show-db.html | 15 ++ src/pages/show-db.ts | 57 +++++ src/pages/tree.html | 36 +++ src/pages/tree.tsx | 400 ++++++++++++++++++++++++++++++++++ 10 files changed, 1347 insertions(+) create mode 100644 src/pages/confirm-contract.html create mode 100644 src/pages/confirm-contract.tsx create mode 100644 src/pages/confirm-create-reserve.html create mode 100644 src/pages/confirm-create-reserve.tsx create mode 100644 src/pages/debug.html create mode 100644 src/pages/help/empty-wallet.html create mode 100644 src/pages/show-db.html create mode 100644 src/pages/show-db.ts create mode 100644 src/pages/tree.html create mode 100644 src/pages/tree.tsx (limited to 'src/pages') diff --git a/src/pages/confirm-contract.html b/src/pages/confirm-contract.html new file mode 100644 index 000000000..54a4d618d --- /dev/null +++ b/src/pages/confirm-contract.html @@ -0,0 +1,75 @@ + + + + + Taler Wallet: Confirm Reserve Creation + + + + + + + + + + + + + + + + + + + +
+

GNU Taler Wallet

+
+
+ + + diff --git a/src/pages/confirm-contract.tsx b/src/pages/confirm-contract.tsx new file mode 100644 index 000000000..7bae691b1 --- /dev/null +++ b/src/pages/confirm-contract.tsx @@ -0,0 +1,231 @@ +/* + This file is part of TALER + (C) 2015 GNUnet e.V. + + TALER is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + TALER is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + TALER; see the file COPYING. If not, see + */ + +/** + * Page shown to the user to confirm entering + * a contract. + * + * @author Florian Dold + */ + +"use strict"; + +import {substituteFulfillmentUrl} from "src/helpers"; +import {Contract, AmountJson, IExchangeInfo} from "src/types"; +import {Offer} from "src/wallet"; +import {renderContract, prettyAmount} from "src/renderHtml"; +import {getExchanges} from "src/wxApi"; + + +interface DetailState { + collapsed: boolean; + exchanges: null|IExchangeInfo[]; +} + +interface DetailProps { + contract: Contract + collapsed: boolean +} + + +class Details extends React.Component { + constructor(props: DetailProps) { + super(props); + console.log("new Details component created"); + this.state = { + collapsed: props.collapsed, + exchanges: null + }; + + console.log("initial state:", this.state); + + this.update(); + } + + async update() { + let exchanges = await getExchanges(); + this.setState({exchanges} as any); + } + + render() { + if (this.state.collapsed) { + return ( +
+ +
+ ); + } else { + return ( +
+ +
+ Accepted exchanges: +
    + {this.props.contract.exchanges.map( + e =>
  • {`${e.url}: ${e.master_pub}`}
    • )} +
+ Exchanges in the wallet: +
    + {(this.state.exchanges || []).map( + (e: IExchangeInfo) => +
  • {`${e.baseUrl}: ${e.masterPublicKey}`}
    • )} +
+
+
); + } + } +} + +interface ContractPromptProps { + offerId: number; +} + +interface ContractPromptState { + offer: any; + error: string|null; + payDisabled: boolean; +} + +class ContractPrompt extends React.Component { + constructor() { + super(); + this.state = { + offer: undefined, + error: null, + payDisabled: true, + } + } + + componentWillMount() { + this.update(); + } + + componentWillUnmount() { + // FIXME: abort running ops + } + + async update() { + let offer = await this.getOffer(); + this.setState({offer} as any); + this.checkPayment(); + } + + getOffer(): Promise { + return new Promise((resolve, reject) => { + let msg = { + type: 'get-offer', + detail: { + offerId: this.props.offerId + } + }; + chrome.runtime.sendMessage(msg, (resp) => { + resolve(resp); + }); + }) + } + + checkPayment() { + let msg = { + type: 'check-pay', + detail: { + offer: this.state.offer + } + }; + chrome.runtime.sendMessage(msg, (resp) => { + if (resp.error) { + console.log("check-pay error", JSON.stringify(resp)); + switch (resp.error) { + case "coins-insufficient": + this.state.error = i18n`You have insufficient funds of the requested currency in your wallet.`; + break; + default: + this.state.error = `Error: ${resp.error}`; + break; + } + this.state.payDisabled = true; + } else { + this.state.payDisabled = false; + this.state.error = null; + } + this.setState({} as any); + window.setTimeout(() => this.checkPayment(), 500); + }); + } + + doPayment() { + let d = {offer: this.state.offer}; + chrome.runtime.sendMessage({type: 'confirm-pay', detail: d}, (resp) => { + if (resp.error) { + console.log("confirm-pay error", JSON.stringify(resp)); + switch (resp.error) { + case "coins-insufficient": + this.state.error = "You do not have enough coins of the" + + " requested currency."; + break; + default: + this.state.error = `Error: ${resp.error}`; + break; + } + this.setState({} as any); + return; + } + let c = d.offer.contract; + console.log("contract", c); + document.location.href = substituteFulfillmentUrl(c.fulfillment_url, + this.state.offer); + }); + } + + + render() { + if (!this.state.offer) { + return ...; + } + let c = this.state.offer.contract; + return ( +
+
+ {renderContract(c)} +
+ +
+ {(this.state.error ?

{this.state.error}

:

)} +

+
+
+ ); + } +} + + +export function main() { + let url = URI(document.location.href); + let query: any = URI.parseQuery(url.query()); + let offerId = JSON.parse(query.offerId); + + ReactDOM.render(, document.getElementById( + "contract")!); +} diff --git a/src/pages/confirm-create-reserve.html b/src/pages/confirm-create-reserve.html new file mode 100644 index 000000000..c67c7e960 --- /dev/null +++ b/src/pages/confirm-create-reserve.html @@ -0,0 +1,93 @@ + + + + + Taler Wallet: Select Taler Provider + + + + + + + + + + + + + + + + + + + + + +
+

GNU Taler Wallet

+
+
+ + + diff --git a/src/pages/confirm-create-reserve.tsx b/src/pages/confirm-create-reserve.tsx new file mode 100644 index 000000000..372f11a4b --- /dev/null +++ b/src/pages/confirm-create-reserve.tsx @@ -0,0 +1,397 @@ +/* + This file is part of TALER + (C) 2015-2016 GNUnet e.V. + + TALER is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + TALER is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + TALER; see the file COPYING. If not, see + */ + + +/** + * Page shown to the user to confirm creation + * of a reserve, usually requested by the bank. + * + * @author Florian Dold + */ + +import {amountToPretty, canonicalizeBaseUrl} from "src/helpers"; +import { + AmountJson, CreateReserveResponse, + ReserveCreationInfo, Amounts, + Denomination, +} from "src/types"; +import {getReserveCreationInfo} from "src/wxApi"; +import {ImplicitStateComponent, StateHolder} from "src/components"; + +"use strict"; + + +function delay(delayMs: number, value: T): Promise { + return new Promise((resolve, reject) => { + setTimeout(() => resolve(value), delayMs); + }); +} + +class EventTrigger { + triggerResolve: any; + triggerPromise: Promise; + + constructor() { + this.reset(); + } + + private reset() { + this.triggerPromise = new Promise((resolve, reject) => { + this.triggerResolve = resolve; + }); + } + + trigger() { + this.triggerResolve(false); + this.reset(); + } + + async wait(delayMs: number): Promise { + return await Promise.race([this.triggerPromise, delay(delayMs, true)]); + } +} + + +function renderReserveCreationDetails(rci: ReserveCreationInfo|null) { + if (!rci) { + return

+ Details will be displayed when a valid exchange provider URL is entered.

+ } + + let denoms = rci.selectedDenoms; + + let countByPub: {[s: string]: number} = {}; + let uniq: Denomination[] = []; + + denoms.forEach((x: Denomination) => { + let c = countByPub[x.denom_pub] || 0; + if (c == 0) { + uniq.push(x); + } + c += 1; + countByPub[x.denom_pub] = c; + }); + + function row(denom: Denomination) { + return ( + + {countByPub[denom.denom_pub] + "x"} + {amountToPretty(denom.value)} + {amountToPretty(denom.fee_withdraw)} + {amountToPretty(denom.fee_refresh)} + {amountToPretty(denom.fee_deposit)} + + ); + } + + let withdrawFeeStr = amountToPretty(rci.withdrawFee); + let overheadStr = amountToPretty(rci.overhead); + + return ( +
+

{`Withdrawal fees: ${withdrawFeeStr}`}

+

{`Rounding loss: ${overheadStr}`}

+ + + + + + + + + + {uniq.map(row)} + +
# CoinsValueWithdraw FeeRefresh FeeDeposit fee
+
+ ); +} + + +function getSuggestedExchange(currency: string): Promise { + // TODO: make this request go to the wallet backend + // Right now, this is a stub. + const defaultExchange: {[s: string]: string} = { + "KUDOS": "https://exchange.demo.taler.net", + "PUDOS": "https://exchange.test.taler.net", + }; + + let exchange = defaultExchange[currency]; + + if (!exchange) { + exchange = "" + } + + return Promise.resolve(exchange); +} + + +function WithdrawFee(props: {reserveCreationInfo: ReserveCreationInfo|null}): JSX.Element { + if (props.reserveCreationInfo) { + let {overhead, withdrawFee} = props.reserveCreationInfo; + let totalCost = Amounts.add(overhead, withdrawFee).amount; + return

Withdraw fees: {amountToPretty(totalCost)}

; + } + return

; +} + + +interface ExchangeSelectionProps { + suggestedExchangeUrl: string; + amount: AmountJson; + callback_url: string; + wt_types: string[]; +} + + +class ExchangeSelection extends ImplicitStateComponent { + statusString: StateHolder = this.makeState(null); + reserveCreationInfo: StateHolder = this.makeState( + null); + url: StateHolder = this.makeState(null); + detailCollapsed: StateHolder = this.makeState(true); + + updateEvent = new EventTrigger(); + + constructor(props: ExchangeSelectionProps) { + super(props); + this.onUrlChanged(props.suggestedExchangeUrl || null); + } + + + renderAdvanced(): JSX.Element { + if (this.detailCollapsed() && this.url() !== null && !this.statusString()) { + return ( + + ); + } + return ( +

+

Provider Selection

+ + this.onUrlChanged((e.target as HTMLInputElement).value)}/> +
+ {this.renderStatus()} +

Detailed Fee Structure

+ {renderReserveCreationDetails(this.reserveCreationInfo())} +
) + } + + renderFee() { + if (!this.reserveCreationInfo()) { + return "??"; + } + let rci = this.reserveCreationInfo()!; + let totalCost = Amounts.add(rci.overhead, rci.withdrawFee).amount; + return `${amountToPretty(totalCost)}`; + } + + renderFeeStatus() { + if (this.reserveCreationInfo()) { + return ( +

+ The exchange provider will charge + {" "} + {this.renderFee()} + {" "} + in fees. +

+ ); + } + if (this.url() && !this.statusString()) { + let shortName = URI(this.url()!).host(); + return

+ Waiting for a response from + {" "} + {shortName} +

; + } + if (this.statusString()) { + return ( +

+ A problem occured, see below. +

+ ); + } + return ( +

+ Information about fees will be available when an exchange provider is selected. +

+ ); + } + + render(): JSX.Element { + return ( +
+

+ {"You are about to withdraw "} + {amountToPretty(this.props.amount)} + {" from your bank account into your wallet."} +

+ {this.renderFeeStatus()} + +
+ {this.renderAdvanced()} +
+ ); + } + + + confirmReserve() { + this.confirmReserveImpl(this.reserveCreationInfo()!, + this.url()!, + this.props.amount, + this.props.callback_url); + } + + /** + * Do an update of the reserve creation info, without any debouncing. + */ + async forceReserveUpdate() { + this.reserveCreationInfo(null); + if (!this.url()) { + this.statusString(i18n`Error: URL is empty`); + return; + } + + this.statusString(null); + let parsedUrl = URI(this.url()!); + if (parsedUrl.is("relative")) { + this.statusString(i18n`Error: URL may not be relative`); + return; + } + + try { + let r = await getReserveCreationInfo(this.url()!, + this.props.amount); + console.log("get exchange info resolved"); + this.reserveCreationInfo(r); + console.dir(r); + } catch (e) { + console.log("get exchange info rejected"); + if (e.hasOwnProperty("httpStatus")) { + this.statusString(`Error: request failed with status ${e.httpStatus}`); + } else if (e.hasOwnProperty("errorResponse")) { + let resp = e.errorResponse; + this.statusString(`Error: ${resp.error} (${resp.hint})`); + } + } + } + + reset() { + this.statusString(null); + this.reserveCreationInfo(null); + } + + confirmReserveImpl(rci: ReserveCreationInfo, + exchange: string, + amount: AmountJson, + callback_url: string) { + const d = {exchange, amount}; + const cb = (rawResp: any) => { + if (!rawResp) { + throw Error("empty response"); + } + // FIXME: filter out types that bank/exchange don't have in common + let wire_details = rci.wireInfo; + if (!rawResp.error) { + const resp = CreateReserveResponse.checked(rawResp); + let q: {[name: string]: string|number} = { + wire_details: JSON.stringify(wire_details), + exchange: resp.exchange, + reserve_pub: resp.reservePub, + amount_value: amount.value, + amount_fraction: amount.fraction, + amount_currency: amount.currency, + }; + let url = URI(callback_url).addQuery(q); + if (!url.is("absolute")) { + throw Error("callback url is not absolute"); + } + console.log("going to", url.href()); + document.location.href = url.href(); + } else { + this.reset(); + this.statusString( + `Oops, something went wrong.` + + `The wallet responded with error status (${rawResp.error}).`); + } + }; + chrome.runtime.sendMessage({type: 'create-reserve', detail: d}, cb); + } + + async onUrlChanged(url: string|null) { + this.reset(); + this.url(url); + if (url == undefined) { + return; + } + this.updateEvent.trigger(); + let waited = await this.updateEvent.wait(200); + if (waited) { + // Run the actual update if nobody else preempted us. + this.forceReserveUpdate(); + this.forceUpdate(); + } + } + + renderStatus(): any { + if (this.statusString()) { + return

{this.statusString()}

; + } else if (!this.reserveCreationInfo()) { + return

Checking URL, please wait ...

; + } + return ""; + } +} + +export async 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; + const wt_types = JSON.parse(query.wt_types); + + try { + const suggestedExchangeUrl = await getSuggestedExchange(amount.currency); + let args = { + wt_types, + suggestedExchangeUrl, + callback_url, + amount + }; + + ReactDOM.render(, document.getElementById( + "exchange-selection")!); + + } catch (e) { + // TODO: provide more context information, maybe factor it out into a + // TODO:generic error reporting function or component. + document.body.innerText = `Fatal error: "${e.message}".`; + console.error(`got error "${e.message}"`, e); + } +} diff --git a/src/pages/debug.html b/src/pages/debug.html new file mode 100644 index 000000000..b8ddc7ccb --- /dev/null +++ b/src/pages/debug.html @@ -0,0 +1,13 @@ + + + + Taler Wallet Debugging + + + +

Debug Pages

+ Show DB
+ Show balance + + + diff --git a/src/pages/help/empty-wallet.html b/src/pages/help/empty-wallet.html new file mode 100644 index 000000000..dd29d9689 --- /dev/null +++ b/src/pages/help/empty-wallet.html @@ -0,0 +1,30 @@ + + + + + GNU Taler Help - Empty Wallet + + + + + +
+
+
+

Your wallet is empty!

+

You have succeeded with installing the Taler wallet. However, before + you can buy articles using the Taler wallet, you must withdraw electronic coins. + This is typically done by visiting your bank's online banking Web site. There, + you instruct your bank to transfer the funds to a Taler exchange operator. In + return, your wallet will be allowed to withdraw electronic coins.

+

At this stage, we are not aware of any regular exchange operators issuing + coins in well-known currencies. However, to see how Taler would work, you + can visit our "fake" bank at + bank.demo.taler.net to + withdraw coins in the "KUDOS" currency that we created just for + demonstrating the system.

+
+
+
+ + diff --git a/src/pages/show-db.html b/src/pages/show-db.html new file mode 100644 index 000000000..af8ca6eb1 --- /dev/null +++ b/src/pages/show-db.html @@ -0,0 +1,15 @@ + + + + + + Taler Wallet: Reserve Created + + + + + +

DB Dump

+ 

+  
+
diff --git a/src/pages/show-db.ts b/src/pages/show-db.ts
new file mode 100644
index 000000000..71e74388b
--- /dev/null
+++ b/src/pages/show-db.ts
@@ -0,0 +1,57 @@
+/*
+ This file is part of TALER
+ (C) 2015 GNUnet e.V.
+
+ TALER is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ TALER is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ TALER; see the file COPYING.  If not, see 
+ */
+
+
+/**
+ * Wallet database dump for debugging.
+ *
+ * @author Florian Dold
+ */
+
+function replacer(match: string, pIndent: string, pKey: string, pVal: string,
+                  pEnd: string) {
+  var key = '';
+  var val = '';
+  var str = '';
+  var r = pIndent || '';
+  if (pKey) {
+    r = r + key + pKey.replace(/[": ]/g, '') + ': ';
+  }
+  if (pVal) {
+    r = r + (pVal[0] == '"' ? str : val) + pVal + '';
+  }
+  return r + (pEnd || '');
+}
+
+
+function prettyPrint(obj: any) {
+  var jsonLine = /^( *)("[\w]+": )?("[^"]*"|[\w.+-]*)?([,[{])?$/mg;
+  return JSON.stringify(obj, null as any, 3)
+             .replace(/&/g, '&').replace(/\\"/g, '"')
+             .replace(//g, '>')
+             .replace(jsonLine, replacer);
+}
+
+
+document.addEventListener("DOMContentLoaded", () => {
+  chrome.runtime.sendMessage({type: 'dump-db'}, (resp) => {
+    const el = document.getElementById('dump');
+    if (!el) {
+      throw Error();
+    }
+    el.innerHTML = prettyPrint(resp);
+  });
+});
diff --git a/src/pages/tree.html b/src/pages/tree.html
new file mode 100644
index 000000000..306044159
--- /dev/null
+++ b/src/pages/tree.html
@@ -0,0 +1,36 @@
+
+
+
+
+	Taler Wallet: Tree View
+
+	
+	
+
+	
+
+	
+	
+	
+
+	
+	
+	
+	
+
+	
+	
+
+	
+
+        
+          

+        
+
diff --git a/src/pages/tree.tsx b/src/pages/tree.tsx
new file mode 100644
index 000000000..e368ffe9b
--- /dev/null
+++ b/src/pages/tree.tsx
@@ -0,0 +1,400 @@
+/*
+ This file is part of TALER
+ (C) 2016 Inria
+
+ TALER is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ TALER is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ TALER; see the file COPYING.  If not, see 
+ */
+
+/**
+ * Show contents of the wallet as a tree.
+ *
+ * @author Florian Dold
+ */
+
+
+import { IExchangeInfo } from "src/types";
+import { ReserveRecord, Coin, PreCoin, Denomination } from "src/types";
+import { ImplicitStateComponent, StateHolder } from "src/components";
+import {
+  getReserves, getExchanges, getCoins, getPreCoins,
+  refresh
+} from "src/wxApi";
+import { prettyAmount, abbrev } from "src/renderHtml";
+import { getTalerStampDate } from "src/helpers";
+
+interface ReserveViewProps {
+  reserve: ReserveRecord;
+}
+
+class ReserveView extends React.Component {
+  render(): JSX.Element {
+    let r: ReserveRecord = this.props.reserve;
+    return (
+      

+        
    
+          
  • Key: {r.reserve_pub}
    • 
+          
  • Created: {(new Date(r.created * 1000).toString())}
    • 
+          
  • Current: {r.current_amount ? prettyAmount(r.current_amount!) : "null"}
    • 
+          
  • Requested: {prettyAmount(r.requested_amount)}
    • 
+          
  • Confirmed: {r.confirmed}
    • 
+        

+      

+    );
+  }
+}
+
+interface ReserveListProps {
+  exchangeBaseUrl: string;
+}
+
+interface ToggleProps {
+  expanded: StateHolder;
+}
+
+class Toggle extends ImplicitStateComponent {
+  renderButton() {
+    let show = () => {
+      this.props.expanded(true);
+      this.setState({});
+    };
+    let hide = () => {
+      this.props.expanded(false);
+      this.setState({});
+    };
+    if (this.props.expanded()) {
+      return ;
+    }
+    return ;
+
+  }
+  render() {
+    return (
+      

+        {this.renderButton()}
+        {this.props.expanded() ? this.props.children : []}
+      
);
+  }
+}
+
+
+interface CoinViewProps {
+  coin: Coin;
+}
+
+interface RefreshDialogProps {
+  coin: Coin;
+}
+
+class RefreshDialog extends ImplicitStateComponent {
+  refreshRequested = this.makeState(false);
+  render(): JSX.Element {
+    if (!this.refreshRequested()) {
+      return (
+        

+          
+        

+      );
+    }
+    return (
+      

+        Refresh amount: 
+        
+        
+      

+      );
+  }
+}
+
+class CoinView extends React.Component {
+  render() {
+    let c = this.props.coin;
+    return (
+      

+        
    
+          
  • Key: {c.coinPub}
    • 
+          
  • Current amount: {prettyAmount(c.currentAmount)}
    • 
+          
  • Denomination: {abbrev(c.denomPub, 20)}
    • 
+          
  • Suspended: {(c.suspended || false).toString()}
    • 
+          
    • 
+        

+      

+    );
+  }
+}
+
+
+
+interface PreCoinViewProps {
+  precoin: PreCoin;
+}
+
+class PreCoinView extends React.Component {
+  render() {
+    let c = this.props.precoin;
+    return (
+      

+        
    
+          
  • Key: {c.coinPub}
    • 
+        

+      

+    );
+  }
+}
+
+interface CoinListProps {
+  exchangeBaseUrl: string;
+}
+
+class CoinList extends ImplicitStateComponent {
+  coins = this.makeState(null);
+  expanded = this.makeState(false);
+
+  constructor(props: CoinListProps) {
+    super(props);
+    this.update(props);
+  }
+
+  async update(props: CoinListProps) {
+    let coins = await getCoins(props.exchangeBaseUrl);
+    this.coins(coins);
+  }
+
+  componentWillReceiveProps(newProps: CoinListProps) {
+    this.update(newProps);
+  }
+
+  render(): JSX.Element {
+    if (!this.coins()) {
+      return 
...
;
+    }
+    return (
+      

+        Coins ({this.coins() !.length.toString()})
+        {" "}
+        
+          {this.coins() !.map((c) => )}
+        
+      

+    );
+  }
+}
+
+
+interface PreCoinListProps {
+  exchangeBaseUrl: string;
+}
+
+class PreCoinList extends ImplicitStateComponent {
+  precoins = this.makeState(null);
+  expanded = this.makeState(false);
+
+  constructor(props: PreCoinListProps) {
+    super(props);
+    this.update();
+  }
+
+  async update() {
+    let precoins = await getPreCoins(this.props.exchangeBaseUrl);
+    this.precoins(precoins);
+  }
+
+  render(): JSX.Element {
+    if (!this.precoins()) {
+      return 
...
;
+    }
+    return (
+      

+        Pre-Coins ({this.precoins() !.length.toString()})
+        {" "}
+        
+          {this.precoins() !.map((c) => )}
+        
+      

+    );
+  }
+}
+
+interface DenominationListProps {
+  exchange: IExchangeInfo;
+}
+
+interface ExpanderTextProps {
+  text: string;
+}
+
+class ExpanderText extends ImplicitStateComponent {
+  expanded = this.makeState(false);
+  textArea: any = undefined;
+
+  componentDidUpdate() {
+    if (this.expanded() && this.textArea) {
+      this.textArea.focus();
+      this.textArea.scrollTop = 0;
+    }
+  }
+
+  render(): JSX.Element {
+    if (!this.expanded()) {
+      return (
+         { this.expanded(true); }}>
+          {(this.props.text.length <= 10)
+            ?  this.props.text 
+            : (
+                
+                  {this.props.text.substring(0,10)}
+                  ...
+                
+              )
+          }
+        
+      );
+    }
+    return (
+      
+    );
+  }
+}
+
+class DenominationList extends ImplicitStateComponent {
+  expanded = this.makeState(false);
+
+  renderDenom(d: Denomination) {
+    return (
+      

+        
    
+          
  • Value: {prettyAmount(d.value)}
    • 
+          
  • Withdraw fee: {prettyAmount(d.fee_withdraw)}
    • 
+          
  • Refresh fee: {prettyAmount(d.fee_refresh)}
    • 
+          
  • Deposit fee: {prettyAmount(d.fee_deposit)}
    • 
+          
  • Refund fee: {prettyAmount(d.fee_refund)}
    • 
+          
  • Start: {getTalerStampDate(d.stamp_start)!.toString()}
    • 
+          
  • Withdraw expiration: {getTalerStampDate(d.stamp_expire_withdraw)!.toString()}
    • 
+          
  • Legal expiration: {getTalerStampDate(d.stamp_expire_legal)!.toString()}
    • 
+          
  • Deposit expiration: {getTalerStampDate(d.stamp_expire_deposit)!.toString()}
    • 
+          
  • Denom pub: 
    • 
+        

+      

+    );
+  }
+
+  render(): JSX.Element {
+    return (
+      

+        Denominations ({this.props.exchange.active_denoms.length.toString()})
+        {" "}
+        
+          {this.props.exchange.active_denoms.map((d) => this.renderDenom(d))}
+        
+      

+    );
+  }
+}
+
+class ReserveList extends ImplicitStateComponent {
+  reserves = this.makeState(null);
+  expanded = this.makeState(false);
+
+  constructor(props: ReserveListProps) {
+    super(props);
+    this.update();
+  }
+
+  async update() {
+    let reserves = await getReserves(this.props.exchangeBaseUrl);
+    this.reserves(reserves);
+  }
+
+  render(): JSX.Element {
+    if (!this.reserves()) {
+      return 
...
;
+    }
+    return (
+      

+        Reserves ({this.reserves() !.length.toString()})
+        {" "}
+        
+          {this.reserves() !.map((r) => )}
+        
+      

+    );
+  }
+}
+
+interface ExchangeProps {
+  exchange: IExchangeInfo;
+}
+
+class ExchangeView extends React.Component {
+  render(): JSX.Element {
+    let e = this.props.exchange;
+    return (
+      

+        
    
+          
  • Exchange Base Url: {this.props.exchange.baseUrl}
    • 
+          
  • Master public key: 
    • 
+        

+        
+        
+        
+        
+      

+    );
+  }
+}
+
+interface ExchangesListState {
+  exchanges?: IExchangeInfo[];
+}
+
+class ExchangesList extends React.Component {
+  constructor() {
+    super();
+    let port = chrome.runtime.connect();
+    port.onMessage.addListener((msg: any) => {
+      if (msg.notify) {
+        console.log("got notified");
+        this.update();
+      }
+    });
+    this.update();
+    this.state = {} as any;
+  }
+
+  async update() {
+    let exchanges = await getExchanges();
+    console.log("exchanges: ", exchanges);
+    this.setState({ exchanges });
+  }
+
+  render(): JSX.Element {
+    let exchanges = this.state.exchanges;
+    if (!exchanges) {
+      return ...;
+    }
+    return (
+      

+        Exchanges ({exchanges.length.toString()}):
+        {exchanges.map(e => )}
+      

+    );
+  }
+}
+
+export function main() {
+  ReactDOM.render(, document.getElementById("container")!);
+}
-- 
cgit v1.2.3