2 files changed, 57 insertions, 48 deletions

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