From 51aa6d81464afe92e60f13281d4fda3bb54c45ba Mon Sep 17 00:00:00 2001 From: Florian Dold Date: Thu, 5 Sep 2019 16:23:54 +0200 Subject: refactor / format --- src/webex/renderHtml.tsx | 203 ++++++++++++++++++++++++++--------------------- 1 file changed, 114 insertions(+), 89 deletions(-) (limited to 'src/webex/renderHtml.tsx') diff --git a/src/webex/renderHtml.tsx b/src/webex/renderHtml.tsx index 0f736d1b6..e2f821058 100644 --- a/src/webex/renderHtml.tsx +++ b/src/webex/renderHtml.tsx @@ -20,24 +20,18 @@ * @author Florian Dold */ - /** * Imports. */ import { AmountJson } from "../amounts"; import * as Amounts from "../amounts"; -import { - DenominationRecord, -} from "../dbTypes"; -import { - ReserveCreationInfo, -} from "../walletTypes"; +import { DenominationRecord } from "../dbTypes"; +import { ReserveCreationInfo } from "../walletTypes"; import * as moment from "moment"; import * as i18n from "../i18n"; import React from "react"; import ReactDOM from "react-dom"; - /** * Render amount as HTML, which non-breaking space between * decimal value and currency. @@ -53,11 +47,15 @@ export function renderAmount(amount: AmountJson | string) { return (invalid amount); } const x = a.value + a.fraction / Amounts.fractionalBase; - return {x} {a.currency}; + return ( + + {x} {a.currency} + + ); } -export const AmountView = ({amount}: {amount: AmountJson | string}) => renderAmount(amount); - +export const AmountView = ({ amount }: { amount: AmountJson | string }) => + renderAmount(amount); /** * Abbreviate a string to a given length, and show the full @@ -75,50 +73,61 @@ export function abbrev(s: string, n: number = 5) { ); } - interface CollapsibleState { collapsed: boolean; } - interface CollapsibleProps { initiallyCollapsed: boolean; title: string; } - /** * Component that shows/hides its children when clicking * a heading. */ -export class Collapsible extends React.Component { +export class Collapsible extends React.Component< + CollapsibleProps, + CollapsibleState +> { constructor(props: CollapsibleProps) { super(props); this.state = { collapsed: props.initiallyCollapsed }; } render() { const doOpen = (e: any) => { - this.setState({collapsed: false}); + this.setState({ collapsed: false }); e.preventDefault(); }; const doClose = (e: any) => { - this.setState({collapsed: true}); + this.setState({ collapsed: true }); e.preventDefault(); }; if (this.state.collapsed) { - return

{this.props.title}

; + return ( +

+ + {this.props.title} + +

+ ); } return (
-

{this.props.title}

+

+ + {this.props.title} + +

{this.props.children}
); } } - -function AuditorDetailsView(props: {rci: ReserveCreationInfo|null}): JSX.Element { +function AuditorDetailsView(props: { + rci: ReserveCreationInfo | null; +}): JSX.Element { const rci = props.rci; console.log("rci", rci); if (!rci) { @@ -129,27 +138,33 @@ function AuditorDetailsView(props: {rci: ReserveCreationInfo|null}): JSX.Element ); } if (rci.exchangeInfo.auditors.length === 0) { - return ( -

- The exchange is not audited by any auditors. -

- ); + return

The exchange is not audited by any auditors.

; } return (
- {rci.exchangeInfo.auditors.map((a) => ( + {rci.exchangeInfo.auditors.map(a => (

Auditor {a.auditor_url}

-

Public key:

-

Trusted: {rci.trustedAuditorPubs.indexOf(a.auditor_pub) >= 0 ? "yes" : "no"}

-

Audits {a.denomination_keys.length} of {rci.numOfferedDenoms} denominations

+

+ Public key: +

+

+ Trusted:{" "} + {rci.trustedAuditorPubs.indexOf(a.auditor_pub) >= 0 ? "yes" : "no"} +

+

+ Audits {a.denomination_keys.length} of {rci.numOfferedDenoms}{" "} + denominations +

))}
); } -function FeeDetailsView(props: {rci: ReserveCreationInfo|null}): JSX.Element { +function FeeDetailsView(props: { + rci: ReserveCreationInfo | null; +}): JSX.Element { const rci = props.rci; if (!rci) { return ( @@ -161,7 +176,7 @@ function FeeDetailsView(props: {rci: ReserveCreationInfo|null}): JSX.Element { const denoms = rci.selectedDenoms; - const countByPub: {[s: string]: number} = {}; + const countByPub: { [s: string]: number } = {}; const uniq: DenominationRecord[] = []; denoms.forEach((x: DenominationRecord) => { @@ -189,22 +204,22 @@ function FeeDetailsView(props: {rci: ReserveCreationInfo|null}): JSX.Element { return [ - Wire Method {s} + Wire Method {s} - Applies Until - Wire Fee - Closing Fee + Applies Until + Wire Fee + Closing Fee , - {rci!.wireFees.feesForType[s].map((f) => ( - - {moment.unix(f.endStamp).format("llll")} - {renderAmount(f.wireFee)} - {renderAmount(f.closingFee)} - - ))} + {rci!.wireFees.feesForType[s].map(f => ( + + {moment.unix(f.endStamp).format("llll")} + {renderAmount(f.wireFee)} + {renderAmount(f.closingFee)} + + ))} , ]; } @@ -215,31 +230,37 @@ function FeeDetailsView(props: {rci: ReserveCreationInfo|null}): JSX.Element { return (

Overview

-

Public key:

-

{i18n.str`Withdrawal fees:`} {withdrawFee}

-

{i18n.str`Rounding loss:`} {overhead}

-

{i18n.str`Earliest expiration (for deposit): ${moment.unix(rci.earliestDepositExpiration).fromNow()}`}

+

+ Public key: +

+

+ {i18n.str`Withdrawal fees:`} {withdrawFee} +

+

+ {i18n.str`Rounding loss:`} {overhead} +

+

{i18n.str`Earliest expiration (for deposit): ${moment + .unix(rci.earliestDepositExpiration) + .fromNow()}`}

Coin Fees

-
- - - - - - - - - - - - {uniq.map(row)} - -
{i18n.str`# Coins`}{i18n.str`Value`}{i18n.str`Withdraw Fee`}{i18n.str`Refresh Fee`}{i18n.str`Deposit Fee`}
+
+ + + + + + + + + + + {uniq.map(row)} +
{i18n.str`# Coins`}{i18n.str`Value`}{i18n.str`Withdraw Fee`}{i18n.str`Refresh Fee`}{i18n.str`Deposit Fee`}

Wire Fees

-
+
- {Object.keys(rci.wireFees.feesForType).map(wireFee)} + {Object.keys(rci.wireFees.feesForType).map(wireFee)}
@@ -249,7 +270,9 @@ function FeeDetailsView(props: {rci: ReserveCreationInfo|null}): JSX.Element { /** * Shows details about a withdraw request. */ -export function WithdrawDetailView(props: {rci: ReserveCreationInfo | null}): JSX.Element { +export function WithdrawDetailView(props: { + rci: ReserveCreationInfo | null; +}): JSX.Element { const rci = props.rci; return (
@@ -263,12 +286,10 @@ export function WithdrawDetailView(props: {rci: ReserveCreationInfo | null}): JS ); } - interface ExpanderTextProps { text: string; } - /** * Show a heading with a toggle to show/hide the expandable content. */ @@ -276,19 +297,16 @@ export function ExpanderText({ text }: ExpanderTextProps) { return {text}; } - - export interface LoadingButtonProps { loading: boolean; } export function ProgressButton( - props: - & React.PropsWithChildren - & React.DetailedHTMLProps< - React.ButtonHTMLAttributes, - HTMLButtonElement - >, + props: React.PropsWithChildren & + React.DetailedHTMLProps< + React.ButtonHTMLAttributes, + HTMLButtonElement + >, ) { return (