make tables scrollable when they would overflow, make long keys expandable

8 files changed, 98 insertions, 89 deletions

diff --git a/src/i18n/de.po b/src/i18n/de.po
index 52f7c82e2..cafa23d4e 100644
--- a/src/i18n/de.po
+++ b/src/i18n/de.po
@@ -285,42 +285,42 @@ msgstr "Bezahlung bestätigen"
 msgid "Cancel"
 msgstr "Saldo"
 
-#: src/webex/renderHtml.tsx:209
+#: src/webex/renderHtml.tsx:212
 #, fuzzy, c-format
 msgid "Withdrawal fees:"
 msgstr "Abheben bei"
 
-#: src/webex/renderHtml.tsx:210
+#: src/webex/renderHtml.tsx:213
 #, c-format
 msgid "Rounding loss:"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:211
+#: src/webex/renderHtml.tsx:214
 #, c-format
 msgid "Earliest expiration (for deposit): %1$s"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:216
+#: src/webex/renderHtml.tsx:220
 #, c-format
 msgid "# Coins"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:217
+#: src/webex/renderHtml.tsx:221
 #, c-format
 msgid "Value"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:218
+#: src/webex/renderHtml.tsx:222
 #, fuzzy, c-format
 msgid "Withdraw Fee"
 msgstr "Abheben bei %1$s"
 
-#: src/webex/renderHtml.tsx:219
+#: src/webex/renderHtml.tsx:223
 #, c-format
 msgid "Refresh Fee"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:220
+#: src/webex/renderHtml.tsx:224
 #, c-format
 msgid "Deposit Fee"
 msgstr ""
diff --git a/src/i18n/en-US.po b/src/i18n/en-US.po
index 6ceaf22aa..559b8f8c5 100644
--- a/src/i18n/en-US.po
+++ b/src/i18n/en-US.po
@@ -282,42 +282,42 @@ msgstr ""
 msgid "Cancel"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:209
+#: src/webex/renderHtml.tsx:212
 #, c-format
 msgid "Withdrawal fees:"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:210
+#: src/webex/renderHtml.tsx:213
 #, c-format
 msgid "Rounding loss:"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:211
+#: src/webex/renderHtml.tsx:214
 #, c-format
 msgid "Earliest expiration (for deposit): %1$s"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:216
+#: src/webex/renderHtml.tsx:220
 #, c-format
 msgid "# Coins"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:217
+#: src/webex/renderHtml.tsx:221
 #, c-format
 msgid "Value"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:218
+#: src/webex/renderHtml.tsx:222
 #, c-format
 msgid "Withdraw Fee"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:219
+#: src/webex/renderHtml.tsx:223
 #, c-format
 msgid "Refresh Fee"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:220
+#: src/webex/renderHtml.tsx:224
 #, c-format
 msgid "Deposit Fee"
 msgstr ""
diff --git a/src/i18n/fr.po b/src/i18n/fr.po
index 41c6e6d6e..6e31237da 100644
--- a/src/i18n/fr.po
+++ b/src/i18n/fr.po
@@ -282,42 +282,42 @@ msgstr ""
 msgid "Cancel"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:209
+#: src/webex/renderHtml.tsx:212
 #, c-format
 msgid "Withdrawal fees:"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:210
+#: src/webex/renderHtml.tsx:213
 #, c-format
 msgid "Rounding loss:"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:211
+#: src/webex/renderHtml.tsx:214
 #, c-format
 msgid "Earliest expiration (for deposit): %1$s"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:216
+#: src/webex/renderHtml.tsx:220
 #, c-format
 msgid "# Coins"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:217
+#: src/webex/renderHtml.tsx:221
 #, c-format
 msgid "Value"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:218
+#: src/webex/renderHtml.tsx:222
 #, c-format
 msgid "Withdraw Fee"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:219
+#: src/webex/renderHtml.tsx:223
 #, c-format
 msgid "Refresh Fee"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:220
+#: src/webex/renderHtml.tsx:224
 #, c-format
 msgid "Deposit Fee"
 msgstr ""
diff --git a/src/i18n/it.po b/src/i18n/it.po
index 41c6e6d6e..6e31237da 100644
--- a/src/i18n/it.po
+++ b/src/i18n/it.po
@@ -282,42 +282,42 @@ msgstr ""
 msgid "Cancel"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:209
+#: src/webex/renderHtml.tsx:212
 #, c-format
 msgid "Withdrawal fees:"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:210
+#: src/webex/renderHtml.tsx:213
 #, c-format
 msgid "Rounding loss:"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:211
+#: src/webex/renderHtml.tsx:214
 #, c-format
 msgid "Earliest expiration (for deposit): %1$s"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:216
+#: src/webex/renderHtml.tsx:220
 #, c-format
 msgid "# Coins"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:217
+#: src/webex/renderHtml.tsx:221
 #, c-format
 msgid "Value"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:218
+#: src/webex/renderHtml.tsx:222
 #, c-format
 msgid "Withdraw Fee"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:219
+#: src/webex/renderHtml.tsx:223
 #, c-format
 msgid "Refresh Fee"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:220
+#: src/webex/renderHtml.tsx:224
 #, c-format
 msgid "Deposit Fee"
 msgstr ""
diff --git a/src/i18n/strings.ts b/src/i18n/strings.ts
index 737458c48..e2bd80a80 100644
--- a/src/i18n/strings.ts
+++ b/src/i18n/strings.ts
@@ -163,7 +163,7 @@ strings['de'] = {
         "Saldo"
       ],
       "Withdrawal fees:": [
-        "Abheben bei %1$s"
+        "Abheben bei"
       ],
       "Rounding loss:": [
         ""
diff --git a/src/i18n/taler-wallet-webex.pot b/src/i18n/taler-wallet-webex.pot
index 41c6e6d6e..6e31237da 100644
--- a/src/i18n/taler-wallet-webex.pot
+++ b/src/i18n/taler-wallet-webex.pot
@@ -282,42 +282,42 @@ msgstr ""
 msgid "Cancel"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:209
+#: src/webex/renderHtml.tsx:212
 #, c-format
 msgid "Withdrawal fees:"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:210
+#: src/webex/renderHtml.tsx:213
 #, c-format
 msgid "Rounding loss:"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:211
+#: src/webex/renderHtml.tsx:214
 #, c-format
 msgid "Earliest expiration (for deposit): %1$s"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:216
+#: src/webex/renderHtml.tsx:220
 #, c-format
 msgid "# Coins"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:217
+#: src/webex/renderHtml.tsx:221
 #, c-format
 msgid "Value"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:218
+#: src/webex/renderHtml.tsx:222
 #, c-format
 msgid "Withdraw Fee"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:219
+#: src/webex/renderHtml.tsx:223
 #, c-format
 msgid "Refresh Fee"
 msgstr ""
 
-#: src/webex/renderHtml.tsx:220
+#: src/webex/renderHtml.tsx:224
 #, c-format
 msgid "Deposit Fee"
 msgstr ""
diff --git a/src/webex/pages/tree.tsx b/src/webex/pages/tree.tsx
index 072150312..c8035c597 100644
--- a/src/webex/pages/tree.tsx
+++ b/src/webex/pages/tree.tsx
@@ -42,7 +42,7 @@ import {
   refresh,
 } from "../wxApi";
 
-import { renderAmount } from "../renderHtml";
+import { ExpanderText, renderAmount } from "../renderHtml";
 
 import * as React from "react";
 import * as ReactDOM from "react-dom";
@@ -244,49 +244,6 @@ interface DenominationListProps {
   exchange: ExchangeRecord;
 }
 
-interface ExpanderTextProps {
-  text: string;
-}
-
-class ExpanderText extends ImplicitStateComponent<ExpanderTextProps> {
-  private expanded = this.makeState<boolean>(false);
-  private 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> {
   private expanded = this.makeState<boolean>(false);
   private denoms = this.makeState<undefined|DenominationRecord[]>(undefined);
diff --git a/src/webex/renderHtml.tsx b/src/webex/renderHtml.tsx
index d4c536fa9..d225cef0c 100644
--- a/src/webex/renderHtml.tsx
+++ b/src/webex/renderHtml.tsx
@@ -31,6 +31,8 @@ import {
   ReserveCreationInfo,
 } from "../types";
 
+import { ImplicitStateComponent } from "./components";
+
 import * as moment from "moment";
 
 import * as i18n from "../i18n";
@@ -131,7 +133,7 @@ function AuditorDetailsView(props: {rci: ReserveCreationInfo|null}): JSX.Element
       {rci.exchangeInfo.auditors.map((a) => (
         <div>
           <h3>Auditor {a.auditor_url}</h3>
-          <p>Public key: {a.auditor_pub}</p>
+          <p>Public key: <ExpanderText text={a.auditor_pub} /></p>
           <p>Trusted: {rci.trustedAuditorPubs.indexOf(a.auditor_pub) >= 0 ? "yes" : "no"}</p>
           <p>Audits {a.denomination_keys.length} of {rci.numOfferedDenoms} denominations</p>
         </div>
@@ -206,10 +208,12 @@ function FeeDetailsView(props: {rci: ReserveCreationInfo|null}): JSX.Element {
   return (
     <div>
       <h3>Overview</h3>
+      <p>Public key: <ExpanderText text={rci.exchangeInfo.masterPublicKey} /></p>
       <p>{i18n.str`Withdrawal fees:`} {withdrawFee}</p>
       <p>{i18n.str`Rounding loss:`} {overhead}</p>
       <p>{i18n.str`Earliest expiration (for deposit): ${moment.unix(rci.earliestDepositExpiration).fromNow()}`}</p>
       <h3>Coin Fees</h3>
+      <div style={{overflow: "auto"}}>
       <table className="pure-table">
         <thead>
         <tr>
@@ -224,10 +228,13 @@ function FeeDetailsView(props: {rci: ReserveCreationInfo|null}): JSX.Element {
         {uniq.map(row)}
         </tbody>
       </table>
+      </div>
       <h3>Wire Fees</h3>
-      <table className="pure-table">
-      {Object.keys(rci.wireFees.feesForType).map(wireFee)}
-      </table>
+      <div style={{overflow: "auto"}}>
+        <table className="pure-table">
+        {Object.keys(rci.wireFees.feesForType).map(wireFee)}
+        </table>
+      </div>
     </div>
   );
 }
@@ -246,3 +253,48 @@ export function WithdrawDetailView(props: {rci: ReserveCreationInfo | null}): JS
     </div>
   );
 }
+
+
+interface ExpanderTextProps {
+  text: string;
+}
+
+export class ExpanderText extends ImplicitStateComponent<ExpanderTextProps> {
+  private expanded = this.makeState<boolean>(false);
+  private 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>
+    );
+  }
+}
+