Finally give in and use React, minor tweeks.

Preact (a minimalistic React alternative) had too many bugs ...

6 files changed, 102 insertions, 38 deletions

diff --git a/pages/confirm-contract.html b/pages/confirm-contract.html
index 809b2177f..5c6c9a446 100644
--- a/pages/confirm-contract.html
+++ b/pages/confirm-contract.html
@@ -10,7 +10,8 @@
   <link rel="icon" href="../img/icon.png">
 
   <script src="../lib/vendor/URI.js"></script>
-  <script src="../lib/vendor/preact.js"></script>
+  <script src="../lib/vendor/react.js"></script>
+  <script src="../lib/vendor/react-dom.js"></script>
   <script src="../lib/vendor/system-csp-production.src.js"></script>
   <!-- <script src="../lib/vendor/jed.js"></script> -->
   <script src="../lib/i18n.js"></script>
diff --git a/pages/confirm-contract.tsx b/pages/confirm-contract.tsx
index 91f4c2e82..a356b25a5 100644
--- a/pages/confirm-contract.tsx
+++ b/pages/confirm-contract.tsx
@@ -22,7 +22,6 @@
  */
 
 
-/// <reference path="../lib/decl/preact.d.ts" />
 import {substituteFulfillmentUrl} from "../lib/wallet/helpers";
 import {Contract, AmountJson, IExchangeInfo} from "../lib/wallet/types";
 import {renderContract, prettyAmount} from "../lib/wallet/renderHtml";
@@ -41,7 +40,7 @@ interface DetailProps {
 }
 
 
-class Details extends preact.Component<DetailProps, DetailState> {
+class Details extends React.Component<DetailProps, DetailState> {
   constructor(props: DetailProps) {
     super(props);
     this.setState({
@@ -63,10 +62,10 @@ class Details extends preact.Component<DetailProps, DetailState> {
     this.setState({exchanges} as any);
   }
 
-  render(props: DetailProps, state: DetailState) {
-    console.log("details collapsed (state)", state.collapsed);
-    console.log("details collapsed (prop)", props.collapsed);
-    if (state.collapsed) {
+  render() {
+    console.log("details collapsed (state)", this.state.collapsed);
+    console.log("details collapsed (prop)", this.props.collapsed);
+    if (this.state.collapsed) {
       return (
         <div>
           <button className="linky"
@@ -85,12 +84,12 @@ class Details extends preact.Component<DetailProps, DetailState> {
           <div>
             Accepted exchanges:
             <ul>
-              {props.contract.exchanges.map(
+              {this.props.contract.exchanges.map(
                 e => <li>{`${e.url}: ${e.master_pub}`}</li>)}
             </ul>
             Exchanges in the wallet:
             <ul>
-              {(state.exchanges || []).map(
+              {(this.state.exchanges || []).map(
                 (e: IExchangeInfo) =>
                   <li>{`${e.baseUrl}: ${e.masterPublicKey}`}</li>)}
             </ul>
@@ -109,7 +108,7 @@ interface ContractPromptState {
   payDisabled: boolean;
 }
 
-class ContractPrompt extends preact.Component<ContractPromptProps, ContractPromptState> {
+class ContractPrompt extends React.Component<ContractPromptProps, ContractPromptState> {
   constructor() {
     super();
     this.state = {
@@ -179,18 +178,18 @@ class ContractPrompt extends preact.Component<ContractPromptProps, ContractPromp
   }
 
 
-  render(props: ContractPromptProps, state: ContractPromptState) {
-    let c = props.offer.contract;
+  render() {
+    let c = this.props.offer.contract;
     return (
       <div>
         {renderContract(c)}
         <button onClick={() => this.doPayment()}
-                disabled={state.payDisabled}
+                disabled={this.state.payDisabled}
                 className="accept">
           Confirm payment
         </button>
-        {(state.error ? <p className="errorbox">{state.error}</p> : <p />)}
-        <Details contract={c} collapsed={!state.error}/>
+        {(this.state.error ? <p className="errorbox">{this.state.error}</p> : <p />)}
+        <Details contract={c} collapsed={!this.state.error}/>
       </div>
     );
   }
@@ -204,6 +203,6 @@ export function main() {
   console.dir(offer);
   let contract = offer.contract;
 
-  preact.render(<ContractPrompt offer={offer}/>, document.getElementById(
+  ReactDOM.render(<ContractPrompt offer={offer}/>, document.getElementById(
     "contract")!);
 }
diff --git a/pages/confirm-create-reserve.html b/pages/confirm-create-reserve.html
index 5c42a68f6..c31a4aa8a 100644
--- a/pages/confirm-create-reserve.html
+++ b/pages/confirm-create-reserve.html
@@ -7,7 +7,8 @@
   <link rel="icon" href="../img/icon.png">
 
   <script src="../lib/vendor/URI.js"></script>
-  <script src="../lib/vendor/preact.js"></script>
+  <script src="../lib/vendor/react.js"></script>
+  <script src="../lib/vendor/react-dom.js"></script>
 
   <!-- i18n -->
   <script src="../lib/vendor/jed.js"></script>
diff --git a/pages/confirm-create-reserve.tsx b/pages/confirm-create-reserve.tsx
index 9bff0e42a..833bfed27 100644
--- a/pages/confirm-create-reserve.tsx
+++ b/pages/confirm-create-reserve.tsx
@@ -31,7 +31,6 @@ import {ImplicitStateComponent, StateHolder} from "../lib/components";
 
 "use strict";
 
-let h = preact.h;
 
 function delay<T>(delayMs: number, value: T): Promise<T> {
   return new Promise<T>((resolve, reject) => {
@@ -227,7 +226,7 @@ class ExchangeSelection extends ImplicitStateComponent<ExchangeSelectionProps> {
     if (this.statusString()) {
       return (
         <p>
-          <strong style="color: red;">A problem occured, see below.</strong>
+          <strong style={{color: "red"}}>A problem occured, see below.</strong>
         </p>
       );
     }
@@ -238,12 +237,12 @@ class ExchangeSelection extends ImplicitStateComponent<ExchangeSelectionProps> {
     );
   }
 
-  render(props: ExchangeSelectionProps): JSX.Element {
+  render(): JSX.Element {
     return (
       <div>
         <p>
           {"You are about to withdraw "}
-          <strong>{amountToPretty(props.amount)}</strong>
+          <strong>{amountToPretty(this.props.amount)}</strong>
           {" from your bank account into your wallet."}
         </p>
         {this.renderFeeStatus()}
@@ -359,7 +358,7 @@ class ExchangeSelection extends ImplicitStateComponent<ExchangeSelectionProps> {
 
   renderStatus(): any {
     if (this.statusString()) {
-      return <p><strong style="color: red;">{this.statusString()}</strong></p>;
+      return <p><strong style={{color: "red"}}>{this.statusString()}</strong></p>;
     } else if (!this.reserveCreationInfo()) {
       return <p>Checking URL, please wait ...</p>;
     }
@@ -384,7 +383,7 @@ export async function main() {
       amount
     };
 
-    preact.render(<ExchangeSelection {...args} />, document.getElementById(
+    ReactDOM.render(<ExchangeSelection {...args} />, document.getElementById(
       "exchange-selection")!);
 
   } catch (e) {
diff --git a/pages/tree.html b/pages/tree.html
index ee12a82e4..1075655f6 100644
--- a/pages/tree.html
+++ b/pages/tree.html
@@ -10,7 +10,8 @@
 	<link rel="icon" href="../img/icon.png">
 
 	<script src="../lib/vendor/URI.js"></script>
-	<script src="../lib/vendor/preact.js"></script>
+	<script src="../lib/vendor/react.js"></script>
+	<script src="../lib/vendor/react-dom.js"></script>
 
 	<!-- i18n -->
 	<script src="../lib/vendor/jed.js"></script>
@@ -29,4 +30,4 @@
 		}
 	</style>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/pages/tree.tsx b/pages/tree.tsx
index e782877a5..c8a67dac2 100644
--- a/pages/tree.tsx
+++ b/pages/tree.tsx
@@ -20,7 +20,6 @@
  * @author Florian Dold
  */
 
-/// <reference path="../lib/decl/preact.d.ts" />
 
 import { IExchangeInfo } from "../lib/wallet/types";
 import { ReserveRecord, Coin, PreCoin, Denomination } from "../lib/wallet/types";
@@ -30,12 +29,13 @@ import {
   refresh
 } from "../lib/wallet/wxApi";
 import { prettyAmount, abbrev } from "../lib/wallet/renderHtml";
+import { getTalerStampDate } from "../lib/wallet/helpers";
 
 interface ReserveViewProps {
   reserve: ReserveRecord;
 }
 
-class ReserveView extends preact.Component<ReserveViewProps, void> {
+class ReserveView extends React.Component<ReserveViewProps, void> {
   render(): JSX.Element {
     let r: ReserveRecord = this.props.reserve;
     return (
@@ -78,7 +78,7 @@ class Toggle extends ImplicitStateComponent<ToggleProps> {
   }
   render() {
     return (
-      <div style="display:inline;">
+      <div style={{display: "inline"}}>
         {this.renderButton()}
         {this.props.expanded() ? this.props.children : []}
       </div>);
@@ -99,7 +99,7 @@ class RefreshDialog extends ImplicitStateComponent<RefreshDialogProps> {
   render(): JSX.Element {
     if (!this.refreshRequested()) {
       return (
-        <div style="display:inline;">
+        <div style={{display: "inline"}}>
           <button onClick={() => this.refreshRequested(true)}>refresh</button>
         </div>
       );
@@ -114,7 +114,7 @@ class RefreshDialog extends ImplicitStateComponent<RefreshDialogProps> {
   }
 }
 
-class CoinView extends preact.Component<CoinViewProps, void> {
+class CoinView extends React.Component<CoinViewProps, void> {
   render() {
     let c = this.props.coin;
     return (
@@ -137,7 +137,7 @@ interface PreCoinViewProps {
   precoin: PreCoin;
 }
 
-class PreCoinView extends preact.Component<PreCoinViewProps, void> {
+class PreCoinView extends React.Component<PreCoinViewProps, void> {
   render() {
     let c = this.props.precoin;
     return (
@@ -160,14 +160,18 @@ class CoinList extends ImplicitStateComponent<CoinListProps> {
 
   constructor(props: CoinListProps) {
     super(props);
-    this.update();
+    this.update(props);
   }
 
-  async update() {
-    let coins = await getCoins(this.props.exchangeBaseUrl);
+  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 <div>...</div>;
@@ -223,6 +227,49 @@ interface DenominationListProps {
   exchange: IExchangeInfo;
 }
 
+interface ExpanderTextProps {
+  text: string;
+}
+
+class ExpanderText extends ImplicitStateComponent<ExpanderTextProps> {
+  expanded = this.makeState<boolean>(false);
+  textArea: any = undefined;
+
+  componentDidUpdate() {
+    if (this.expanded() && this.textArea) {
+      this.textArea.focus();
+      this.textArea.scrollTop = 0;
+    }
+  }
+
+  render(): JSX.Element {
+    if (!this.expanded()) {
+      return (
+        <span onClick={() => { this.expanded(true); }}>
+          {(this.props.text.length <= 10)
+            ?  this.props.text 
+            : (
+                <span>
+                  {this.props.text.substring(0,10)}
+                  <span style={{textDecoration: "underline"}}>...</span>
+                </span>
+              )
+          }
+        </span>
+      );
+    }
+    return (
+      <textarea
+        readOnly
+        style={{display: "block"}}
+        onBlur={() => this.expanded(false)}
+        ref={(e) => this.textArea = e}>
+        {this.props.text}
+      </textarea>
+    );
+  }
+}
+
 class DenominationList extends ImplicitStateComponent<DenominationListProps> {
   expanded = this.makeState<boolean>(false);
 
@@ -235,6 +282,11 @@ class DenominationList extends ImplicitStateComponent<DenominationListProps> {
           <li>Refresh fee: {prettyAmount(d.fee_refresh)}</li>
           <li>Deposit fee: {prettyAmount(d.fee_deposit)}</li>
           <li>Refund fee: {prettyAmount(d.fee_refund)}</li>
+          <li>Start: {getTalerStampDate(d.stamp_start)!.toString()}</li>
+          <li>Withdraw expiration: {getTalerStampDate(d.stamp_expire_withdraw)!.toString()}</li>
+          <li>Legal expiration: {getTalerStampDate(d.stamp_expire_legal)!.toString()}</li>
+          <li>Deposit expiration: {getTalerStampDate(d.stamp_expire_deposit)!.toString()}</li>
+          <li>Denom pub: <ExpanderText text={d.denom_pub} /></li>
         </ul>
       </div>
     );
@@ -287,12 +339,15 @@ interface ExchangeProps {
   exchange: IExchangeInfo;
 }
 
-class ExchangeView extends preact.Component<ExchangeProps, void> {
+class ExchangeView extends React.Component<ExchangeProps, void> {
   render(): JSX.Element {
     let e = this.props.exchange;
     return (
       <div className="tree-item">
-        Url: {this.props.exchange.baseUrl}
+        <ul>
+          <li>Exchange Base Url: {this.props.exchange.baseUrl}</li>
+          <li>Master public key: <ExpanderText text={this.props.exchange.masterPublicKey} /></li>
+        </ul>
         <DenominationList exchange={e} />
         <ReserveList exchangeBaseUrl={this.props.exchange.baseUrl} />
         <CoinList exchangeBaseUrl={this.props.exchange.baseUrl} />
@@ -306,9 +361,17 @@ interface ExchangesListState {
   exchanges: IExchangeInfo[];
 }
 
-class ExchangesList extends preact.Component<any, ExchangesListState> {
+class ExchangesList extends React.Component<any, ExchangesListState> {
   constructor() {
     super();
+    let port = chrome.runtime.connect();
+    port.onMessage.addListener((msg: any) => {
+      if (msg.notify) {
+        console.log("got notified");
+        this.update();
+      }
+    });
+
     this.update();
   }
 
@@ -332,5 +395,5 @@ class ExchangesList extends preact.Component<any, ExchangesListState> {
 }
 
 export function main() {
-  preact.render(<ExchangesList />, document.body);
+  ReactDOM.render(<ExchangesList />, document.body);
 }