partial implementation of tipping

1 files changed, 145 insertions, 0 deletions

diff --git a/src/webex/renderHtml.tsx b/src/webex/renderHtml.tsx
index 792ba2f2c..d4c536fa9 100644
--- a/src/webex/renderHtml.tsx
+++ b/src/webex/renderHtml.tsx
@@ -27,8 +27,14 @@
 import {
   AmountJson,
   Amounts,
+  DenominationRecord,
+  ReserveCreationInfo,
 } from "../types";
 
+import * as moment from "moment";
+
+import * as i18n from "../i18n";
+
 import * as React from "react";
 
 
@@ -101,3 +107,142 @@ export class Collapsible extends React.Component<CollapsibleProps, CollapsibleSt
     );
   }
 }
+
+
+function AuditorDetailsView(props: {rci: ReserveCreationInfo|null}): JSX.Element {
+  const rci = props.rci;
+  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 FeeDetailsView(props: {rci: ReserveCreationInfo|null}): JSX.Element {
+  const rci = props.rci;
+  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>
+  );
+}
+
+
+export function WithdrawDetailView(props: {rci: ReserveCreationInfo | null}): JSX.Element {
+  const rci = props.rci;
+  return (
+    <div>
+      <Collapsible initiallyCollapsed={true} title="Fee and Spending Details">
+        <FeeDetailsView rci={rci} />
+      </Collapsible>
+      <Collapsible initiallyCollapsed={true} title="Auditor Details">
+        <AuditorDetailsView rci={rci} />
+      </Collapsible>
+    </div>
+  );
+}