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/pages/benchmark.tsx | 10 +-- src/webex/pages/common.ts | 31 ------- src/webex/pages/pay.html | 2 +- src/webex/pages/pay.tsx | 29 ++---- src/webex/pages/popup.html | 2 +- src/webex/pages/popup.tsx | 45 +++++----- src/webex/renderHtml.tsx | 203 ++++++++++++++++++++++++------------------ 7 files changed, 149 insertions(+), 173 deletions(-) delete mode 100644 src/webex/pages/common.ts (limited to 'src') diff --git a/src/webex/pages/benchmark.tsx b/src/webex/pages/benchmark.tsx index 1d91ac0bd..b250bc20a 100644 --- a/src/webex/pages/benchmark.tsx +++ b/src/webex/pages/benchmark.tsx @@ -23,14 +23,13 @@ import * as i18n from "../../i18n"; -import { runOnceWhenReady } from "./common"; - import { BenchmarkResult } from "../../walletTypes"; import * as wxApi from "../wxApi"; import * as React from "react"; import * as ReactDOM from "react-dom"; +import { registerMountPage } from "../renderHtml"; interface BenchmarkRunnerState { @@ -103,9 +102,6 @@ class BenchmarkRunner extends React.Component { } } - -runOnceWhenReady(() => { - ReactDOM.render(, document.getElementById("container")!); - // Will be used by the backend to detect when the popup gets closed, - // so we can clear notifications +registerMountPage(() => { + return ; }); diff --git a/src/webex/pages/common.ts b/src/webex/pages/common.ts deleted file mode 100644 index 695e5fc1d..000000000 --- a/src/webex/pages/common.ts +++ /dev/null @@ -1,31 +0,0 @@ -/* - This file is part of TALER - (C) 2018 GNUnet e.V. - - TALER is free software; you can redistribute it and/or modify it under the - terms of the GNU General Public License as published by the Free Software - Foundation; either version 3, or (at your option) any later version. - - TALER is distributed in the hope that it will be useful, but WITHOUT ANY - WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR - A PARTICULAR PURPOSE. See the GNU General Public License for more details. - - You should have received a copy of the GNU General Public License along with - TALER; see the file COPYING. If not, see - */ - -/** - * Common helper functions for all web extension pages. - */ - -/** - * Make sure that a function is executed exactly once - * after the DOM has been loaded. - */ -export function runOnceWhenReady(f: () => void): void { - if (document.readyState === "loading") { - document.addEventListener("DOMContentLoaded", f); - return; - } - f(); -} diff --git a/src/webex/pages/pay.html b/src/webex/pages/pay.html index d3bf992ad..20605ac49 100644 --- a/src/webex/pages/pay.html +++ b/src/webex/pages/pay.html @@ -72,7 +72,7 @@

GNU Taler Wallet

-
+
diff --git a/src/webex/pages/pay.tsx b/src/webex/pages/pay.tsx index 95d12b69a..c266f6d48 100644 --- a/src/webex/pages/pay.tsx +++ b/src/webex/pages/pay.tsx @@ -24,19 +24,13 @@ */ import * as i18n from "../../i18n"; -import { runOnceWhenReady } from "./common"; - -import { ExchangeRecord, ProposalDownloadRecord } from "../../dbTypes"; -import { ContractTerms } from "../../talerTypes"; import { CheckPayResult, PreparePayResult } from "../../walletTypes"; -import { renderAmount, ProgressButton } from "../renderHtml"; +import { renderAmount, ProgressButton, registerMountPage } from "../renderHtml"; import * as wxApi from "../wxApi"; import React, { useState, useEffect } from "react"; -import * as ReactDOM from "react-dom"; import URI = require("urijs"); -import { WalletApiError } from "../wxApi"; import * as Amounts from "../../amounts"; @@ -153,22 +147,11 @@ function TalerPayDialog({ talerPayUri }: { talerPayUri: string }) { ); } -runOnceWhenReady(() => { - try { - const url = new URI(document.location.href); - const query: any = URI.parseQuery(url.query()); +registerMountPage(() => { + const url = new URI(document.location.href); + const query: any = URI.parseQuery(url.query()); - let talerPayUri = query.talerPayUri; + let talerPayUri = query.talerPayUri; - ReactDOM.render( - , - document.getElementById("contract")!, - ); - } catch (e) { - ReactDOM.render( - Fatal error: {e.message}, - document.getElementById("contract")!, - ); - console.error(e); - } + return ; }); diff --git a/src/webex/pages/popup.html b/src/webex/pages/popup.html index 98f24bccc..7929da765 100644 --- a/src/webex/pages/popup.html +++ b/src/webex/pages/popup.html @@ -12,7 +12,7 @@ -
+
diff --git a/src/webex/pages/popup.tsx b/src/webex/pages/popup.tsx index 91ab515e4..205945471 100644 --- a/src/webex/pages/popup.tsx +++ b/src/webex/pages/popup.tsx @@ -26,8 +26,6 @@ */ import * as i18n from "../../i18n"; -import { runOnceWhenReady } from "./common"; - import { AmountJson } from "../../amounts"; import * as Amounts from "../../amounts"; @@ -37,7 +35,12 @@ import { WalletBalanceEntry, } from "../../walletTypes"; -import { abbrev, renderAmount, PageLink } from "../renderHtml"; +import { + abbrev, + renderAmount, + PageLink, + registerMountPage, +} from "../renderHtml"; import * as wxApi from "../wxApi"; import * as React from "react"; @@ -196,8 +199,7 @@ function EmptyBalanceView() {
You have no balance to show. Need some{" "} - help getting - started? + help getting started?
); @@ -303,7 +305,8 @@ class WalletBalanceView extends React.Component {

{i18n.str`Error: could not retrieve balance information.`}

- Click here for help and diagnostics. + Click here for help and + diagnostics.

); @@ -551,22 +554,22 @@ function openTab(page: string) { }; } -const el = ( -
- -
- - - - - +function WalletPopup() { + return ( +
+ +
+ + + + + +
-
-); + ); +} -runOnceWhenReady(() => { - ReactDOM.render(el, document.getElementById("content")!); - // Will be used by the backend to detect when the popup gets closed, - // so we can clear notifications +registerMountPage(() => { chrome.runtime.connect({ name: "popup" }); + return }); 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 (