1 files changed, 4 insertions, 131 deletions

diff --git a/src/webex/pages/confirm-create-reserve.tsx b/src/webex/pages/confirm-create-reserve.tsx
index 0e1cb17df..53b0d635f 100644
--- a/src/webex/pages/confirm-create-reserve.tsx
+++ b/src/webex/pages/confirm-create-reserve.tsx
@@ -22,18 +22,17 @@
  * @author Florian Dold
  */
 
-import {canonicalizeBaseUrl} from "../../helpers";
+import { canonicalizeBaseUrl } from "../../helpers";
 import * as i18n from "../../i18n";
 import {
   AmountJson,
   Amounts,
   CreateReserveResponse,
   CurrencyRecord,
-  DenominationRecord,
   ReserveCreationInfo,
 } from "../../types";
 
-import {ImplicitStateComponent, StateHolder} from "../components";
+import { ImplicitStateComponent, StateHolder } from "../components";
 import {
   createReserve,
   getCurrency,
@@ -41,9 +40,8 @@ import {
   getReserveCreationInfo,
 } from "../wxApi";
 
-import {Collapsible, renderAmount} from "../renderHtml";
+import { renderAmount, WithdrawDetailView } from "../renderHtml";
 
-import * as moment from "moment";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import URI = require("urijs");
@@ -80,126 +78,6 @@ class EventTrigger {
 }
 
 
-function renderAuditorDetails(rci: ReserveCreationInfo|null) {
-  console.log("rci", rci);
-  if (!rci) {
-    return (
-      <p>
-        Details will be displayed when a valid exchange provider URL is entered.
-      </p>
-    );
-  }
-  if (rci.exchangeInfo.auditors.length === 0) {
-    return (
-      <p>
-        The exchange is not audited by any auditors.
-      </p>
-    );
-  }
-  return (
-    <div>
-      {rci.exchangeInfo.auditors.map((a) => (
-        <div>
-          <h3>Auditor {a.auditor_url}</h3>
-          <p>Public key: {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>
-      ))}
-    </div>
-  );
-}
-
-function renderReserveCreationDetails(rci: ReserveCreationInfo|null) {
-  if (!rci) {
-    return (
-      <p>
-        Details will be displayed when a valid exchange provider URL is entered.
-      </p>
-    );
-  }
-
-  const denoms = rci.selectedDenoms;
-
-  const countByPub: {[s: string]: number} = {};
-  const uniq: DenominationRecord[] = [];
-
-  denoms.forEach((x: DenominationRecord) => {
-    let c = countByPub[x.denomPub] || 0;
-    if (c === 0) {
-      uniq.push(x);
-    }
-    c += 1;
-    countByPub[x.denomPub] = c;
-  });
-
-  function row(denom: DenominationRecord) {
-    return (
-      <tr>
-        <td>{countByPub[denom.denomPub] + "x"}</td>
-        <td>{renderAmount(denom.value)}</td>
-        <td>{renderAmount(denom.feeWithdraw)}</td>
-        <td>{renderAmount(denom.feeRefresh)}</td>
-        <td>{renderAmount(denom.feeDeposit)}</td>
-      </tr>
-    );
-  }
-
-  function wireFee(s: string) {
-    return [
-      <thead>
-        <tr>
-        <th colSpan={3}>Wire Method {s}</th>
-        </tr>
-        <tr>
-        <th>Applies Until</th>
-        <th>Wire Fee</th>
-        <th>Closing Fee</th>
-        </tr>
-      </thead>,
-      <tbody>
-      {rci!.wireFees.feesForType[s].map((f) => (
-        <tr>
-          <td>{moment.unix(f.endStamp).format("llll")}</td>
-          <td>{renderAmount(f.wireFee)}</td>
-          <td>{renderAmount(f.closingFee)}</td>
-        </tr>
-      ))}
-      </tbody>,
-    ];
-  }
-
-  const withdrawFee = renderAmount(rci.withdrawFee);
-  const overhead = renderAmount(rci.overhead);
-
-  return (
-    <div>
-      <h3>Overview</h3>
-      <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>
-      <table className="pure-table">
-        <thead>
-        <tr>
-          <th>{i18n.str`# Coins`}</th>
-          <th>{i18n.str`Value`}</th>
-          <th>{i18n.str`Withdraw Fee`}</th>
-          <th>{i18n.str`Refresh Fee`}</th>
-          <th>{i18n.str`Deposit Fee`}</th>
-        </tr>
-        </thead>
-        <tbody>
-        {uniq.map(row)}
-        </tbody>
-      </table>
-      <h3>Wire Fees</h3>
-      <table className="pure-table">
-      {Object.keys(rci.wireFees.feesForType).map(wireFee)}
-      </table>
-    </div>
-  );
-}
 
 
 interface ExchangeSelectionProps {
@@ -428,12 +306,7 @@ class ExchangeSelection extends ImplicitStateComponent<ExchangeSelectionProps> {
         </button>
         </p>
         {this.renderUpdateStatus()}
-        <Collapsible initiallyCollapsed={true} title="Fee and Spending Details">
-          {renderReserveCreationDetails(this.reserveCreationInfo())}
-        </Collapsible>
-        <Collapsible initiallyCollapsed={true} title="Auditor Details">
-          {renderAuditorDetails(this.reserveCreationInfo())}
-        </Collapsible>
+        <WithdrawDetailView rci={this.reserveCreationInfo()} />
       </div>
     );
   }