diff options
author | Florian Dold <florian.dold@gmail.com> | 2017-11-30 04:07:36 +0100 |
---|---|---|
committer | Florian Dold <florian.dold@gmail.com> | 2017-12-01 03:00:09 +0100 |
commit | b8ccc7c990a1542cf80578b41972f9a5b0870af9 (patch) | |
tree | 6f16319f9ce3133c4c4617129a516e692cfc3ac1 /src/webex/renderHtml.tsx | |
parent | bc2c4aff8e657c7d5709433f137299491b98d257 (diff) | |
download | wallet-core-b8ccc7c990a1542cf80578b41972f9a5b0870af9.tar.xz |
partial implementation of tipping
Diffstat (limited to 'src/webex/renderHtml.tsx')
-rw-r--r-- | src/webex/renderHtml.tsx | 145 |
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> + ); +} |