From f3fb8be7db6de87dae40d41bd5597a735c800ca1 Mon Sep 17 00:00:00 2001 From: Florian Dold Date: Sun, 13 Nov 2016 23:30:18 +0100 Subject: restructuring --- src/pages/tree.tsx | 400 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 400 insertions(+) create mode 100644 src/pages/tree.tsx (limited to 'src/pages/tree.tsx') diff --git a/src/pages/tree.tsx b/src/pages/tree.tsx new file mode 100644 index 000000000..e368ffe9b --- /dev/null +++ b/src/pages/tree.tsx @@ -0,0 +1,400 @@ +/* + This file is part of TALER + (C) 2016 Inria + + 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 + */ + +/** + * Show contents of the wallet as a tree. + * + * @author Florian Dold + */ + + +import { IExchangeInfo } from "src/types"; +import { ReserveRecord, Coin, PreCoin, Denomination } from "src/types"; +import { ImplicitStateComponent, StateHolder } from "src/components"; +import { + getReserves, getExchanges, getCoins, getPreCoins, + refresh +} from "src/wxApi"; +import { prettyAmount, abbrev } from "src/renderHtml"; +import { getTalerStampDate } from "src/helpers"; + +interface ReserveViewProps { + reserve: ReserveRecord; +} + +class ReserveView extends React.Component { + render(): JSX.Element { + let r: ReserveRecord = this.props.reserve; + return ( +
+
    +
  • Key: {r.reserve_pub}
    • +
  • Created: {(new Date(r.created * 1000).toString())}
    • +
  • Current: {r.current_amount ? prettyAmount(r.current_amount!) : "null"}
    • +
  • Requested: {prettyAmount(r.requested_amount)}
    • +
  • Confirmed: {r.confirmed}
    • +
+
+ ); + } +} + +interface ReserveListProps { + exchangeBaseUrl: string; +} + +interface ToggleProps { + expanded: StateHolder; +} + +class Toggle extends ImplicitStateComponent { + renderButton() { + let show = () => { + this.props.expanded(true); + this.setState({}); + }; + let hide = () => { + this.props.expanded(false); + this.setState({}); + }; + if (this.props.expanded()) { + return ; + } + return ; + + } + render() { + return ( +
+ {this.renderButton()} + {this.props.expanded() ? this.props.children : []} +
); + } +} + + +interface CoinViewProps { + coin: Coin; +} + +interface RefreshDialogProps { + coin: Coin; +} + +class RefreshDialog extends ImplicitStateComponent { + refreshRequested = this.makeState(false); + render(): JSX.Element { + if (!this.refreshRequested()) { + return ( +
+ +
+ ); + } + return ( +
+ Refresh amount: + + +
+ ); + } +} + +class CoinView extends React.Component { + render() { + let c = this.props.coin; + return ( +
+
    +
  • Key: {c.coinPub}
    • +
  • Current amount: {prettyAmount(c.currentAmount)}
    • +
  • Denomination: {abbrev(c.denomPub, 20)}
    • +
  • Suspended: {(c.suspended || false).toString()}
    • +
    • +
+
+ ); + } +} + + + +interface PreCoinViewProps { + precoin: PreCoin; +} + +class PreCoinView extends React.Component { + render() { + let c = this.props.precoin; + return ( +
+
    +
  • Key: {c.coinPub}
    • +
+
+ ); + } +} + +interface CoinListProps { + exchangeBaseUrl: string; +} + +class CoinList extends ImplicitStateComponent { + coins = this.makeState(null); + expanded = this.makeState(false); + + constructor(props: CoinListProps) { + super(props); + this.update(props); + } + + async update(props: CoinListProps) { + let coins = await getCoins(props.exchangeBaseUrl); + this.coins(coins); + } + + componentWillReceiveProps(newProps: CoinListProps) { + this.update(newProps); + } + + render(): JSX.Element { + if (!this.coins()) { + return
...
; + } + return ( +
+ Coins ({this.coins() !.length.toString()}) + {" "} + + {this.coins() !.map((c) => )} + +
+ ); + } +} + + +interface PreCoinListProps { + exchangeBaseUrl: string; +} + +class PreCoinList extends ImplicitStateComponent { + precoins = this.makeState(null); + expanded = this.makeState(false); + + constructor(props: PreCoinListProps) { + super(props); + this.update(); + } + + async update() { + let precoins = await getPreCoins(this.props.exchangeBaseUrl); + this.precoins(precoins); + } + + render(): JSX.Element { + if (!this.precoins()) { + return
...
; + } + return ( +
+ Pre-Coins ({this.precoins() !.length.toString()}) + {" "} + + {this.precoins() !.map((c) => )} + +
+ ); + } +} + +interface DenominationListProps { + exchange: IExchangeInfo; +} + +interface ExpanderTextProps { + text: string; +} + +class ExpanderText extends ImplicitStateComponent { + expanded = this.makeState(false); + textArea: any = undefined; + + componentDidUpdate() { + if (this.expanded() && this.textArea) { + this.textArea.focus(); + this.textArea.scrollTop = 0; + } + } + + render(): JSX.Element { + if (!this.expanded()) { + return ( + { this.expanded(true); }}> + {(this.props.text.length <= 10) + ? this.props.text + : ( + + {this.props.text.substring(0,10)} + ... + + ) + } + + ); + } + return ( + + ); + } +} + +class DenominationList extends ImplicitStateComponent { + expanded = this.makeState(false); + + renderDenom(d: Denomination) { + return ( +
+
    +
  • Value: {prettyAmount(d.value)}
    • +
  • Withdraw fee: {prettyAmount(d.fee_withdraw)}
    • +
  • Refresh fee: {prettyAmount(d.fee_refresh)}
    • +
  • Deposit fee: {prettyAmount(d.fee_deposit)}
    • +
  • Refund fee: {prettyAmount(d.fee_refund)}
    • +
  • Start: {getTalerStampDate(d.stamp_start)!.toString()}
    • +
  • Withdraw expiration: {getTalerStampDate(d.stamp_expire_withdraw)!.toString()}
    • +
  • Legal expiration: {getTalerStampDate(d.stamp_expire_legal)!.toString()}
    • +
  • Deposit expiration: {getTalerStampDate(d.stamp_expire_deposit)!.toString()}
    • +
  • Denom pub:
    • +
+
+ ); + } + + render(): JSX.Element { + return ( +
+ Denominations ({this.props.exchange.active_denoms.length.toString()}) + {" "} + + {this.props.exchange.active_denoms.map((d) => this.renderDenom(d))} + +
+ ); + } +} + +class ReserveList extends ImplicitStateComponent { + reserves = this.makeState(null); + expanded = this.makeState(false); + + constructor(props: ReserveListProps) { + super(props); + this.update(); + } + + async update() { + let reserves = await getReserves(this.props.exchangeBaseUrl); + this.reserves(reserves); + } + + render(): JSX.Element { + if (!this.reserves()) { + return
...
; + } + return ( +
+ Reserves ({this.reserves() !.length.toString()}) + {" "} + + {this.reserves() !.map((r) => )} + +
+ ); + } +} + +interface ExchangeProps { + exchange: IExchangeInfo; +} + +class ExchangeView extends React.Component { + render(): JSX.Element { + let e = this.props.exchange; + return ( +
+
    +
  • Exchange Base Url: {this.props.exchange.baseUrl}
    • +
  • Master public key:
    • +
+ + + + +
+ ); + } +} + +interface ExchangesListState { + exchanges?: IExchangeInfo[]; +} + +class ExchangesList extends React.Component { + constructor() { + super(); + let port = chrome.runtime.connect(); + port.onMessage.addListener((msg: any) => { + if (msg.notify) { + console.log("got notified"); + this.update(); + } + }); + this.update(); + this.state = {} as any; + } + + async update() { + let exchanges = await getExchanges(); + console.log("exchanges: ", exchanges); + this.setState({ exchanges }); + } + + render(): JSX.Element { + let exchanges = this.state.exchanges; + if (!exchanges) { + return ...; + } + return ( +
+ Exchanges ({exchanges.length.toString()}): + {exchanges.map(e => )} +
+ ); + } +} + +export function main() { + ReactDOM.render(, document.getElementById("container")!); +} -- cgit v1.2.3