diff options
author | Florian Dold <florian.dold@gmail.com> | 2017-05-29 15:18:48 +0200 |
---|---|---|
committer | Florian Dold <florian.dold@gmail.com> | 2017-05-29 15:18:48 +0200 |
commit | d0e0c6baf274aab378233a7ae0d67307c03b3a7c (patch) | |
tree | ceec84efb0d396f32a16c96be1c3cf95dcd3725a /src/webex/pages | |
parent | 2e9ecf952d4028a2d55cd7be5d4afb689bac88b8 (diff) | |
download | wallet-core-d0e0c6baf274aab378233a7ae0d67307c03b3a7c.tar.xz |
fix linter errors
Diffstat (limited to 'src/webex/pages')
-rw-r--r-- | src/webex/pages/popup.tsx | 173 | ||||
-rw-r--r-- | src/webex/pages/tree.tsx | 70 |
2 files changed, 130 insertions, 113 deletions
diff --git a/src/webex/pages/popup.tsx b/src/webex/pages/popup.tsx index f710156a5..a1a3f6b2b 100644 --- a/src/webex/pages/popup.tsx +++ b/src/webex/pages/popup.tsx @@ -22,18 +22,21 @@ * @author Florian Dold */ - -"use strict"; - +/** + * Imports. + */ +import { amountToPretty } from "../../helpers"; +import * as i18n from "../../i18n"; import { AmountJson, Amounts, WalletBalance, - WalletBalanceEntry + WalletBalanceEntry, } from "../../types"; -import { HistoryRecord, HistoryLevel } from "../../wallet"; -import { amountToPretty } from "../../helpers"; -import * as i18n from "../../i18n"; +import { + HistoryLevel, + HistoryRecord, +} from "../../wallet"; import { abbrev } from "../renderHtml"; @@ -42,18 +45,18 @@ import * as ReactDOM from "react-dom"; import URI = require("urijs"); function onUpdateNotification(f: () => void): () => void { - let port = chrome.runtime.connect({name: "notifications"}); - let listener = (msg: any, port: any) => { + const port = chrome.runtime.connect({name: "notifications"}); + const listener = () => { f(); }; port.onMessage.addListener(listener); return () => { port.onMessage.removeListener(listener); - } + }; } -class Router extends React.Component<any,any> { +class Router extends React.Component<any, any> { static setRoute(s: string): void { window.location.hash = s; } @@ -66,21 +69,21 @@ class Router extends React.Component<any,any> { static onRoute(f: any): () => void { Router.routeHandlers.push(f); return () => { - let i = Router.routeHandlers.indexOf(f); + const i = Router.routeHandlers.indexOf(f); this.routeHandlers = this.routeHandlers.splice(i, 1); - } + }; } - static routeHandlers: any[] = []; + private static routeHandlers: any[] = []; componentWillMount() { console.log("router mounted"); window.onhashchange = () => { this.setState({}); - for (let f of Router.routeHandlers) { + for (const f of Router.routeHandlers) { f(); } - } + }; } componentWillUnmount() { @@ -89,27 +92,27 @@ class Router extends React.Component<any,any> { render(): JSX.Element { - let route = window.location.hash.substring(1); + const route = window.location.hash.substring(1); console.log("rendering route", route); let defaultChild: React.ReactChild|null = null; let foundChild: React.ReactChild|null = null; React.Children.forEach(this.props.children, (child) => { - let childProps: any = (child as any).props; + const childProps: any = (child as any).props; if (!childProps) { return; } - if (childProps["default"]) { + if (childProps.default) { defaultChild = child; } - if (childProps["route"] == route) { + if (childProps.route === route) { foundChild = child; } - }) - let child: React.ReactChild | null = foundChild || defaultChild; + }); + const child: React.ReactChild | null = foundChild || defaultChild; if (!child) { throw Error("unknown route"); } - Router.setRoute((child as any).props["route"]); + Router.setRoute((child as any).props.route); return <div>{child}</div>; } } @@ -122,10 +125,10 @@ interface TabProps { function Tab(props: TabProps) { let cssClass = ""; - if (props.target == Router.getRoute()) { + if (props.target === Router.getRoute()) { cssClass = "active"; } - let onClick = (e: React.MouseEvent<HTMLAnchorElement>) => { + const onClick = (e: React.MouseEvent<HTMLAnchorElement>) => { Router.setRoute(props.target); e.preventDefault(); }; @@ -137,8 +140,8 @@ function Tab(props: TabProps) { } -class WalletNavBar extends React.Component<any,any> { - cancelSubscription: any; +class WalletNavBar extends React.Component<any, any> { + private cancelSubscription: any; componentWillMount() { this.cancelSubscription = Router.onRoute(() => { @@ -171,21 +174,25 @@ class WalletNavBar extends React.Component<any,any> { function ExtensionLink(props: any) { - let onClick = (e: React.MouseEvent<HTMLAnchorElement>) => { + const onClick = (e: React.MouseEvent<HTMLAnchorElement>) => { chrome.tabs.create({ - "url": chrome.extension.getURL(props.target) - }); + url: chrome.extension.getURL(props.target), + }); e.preventDefault(); }; return ( <a onClick={onClick} href={props.target}> {props.children} - </a>) + </a> + ); } -export function bigAmount(amount: AmountJson): JSX.Element { - let v = amount.value + amount.fraction / Amounts.fractionalBase; +/** + * Render an amount as a large number with a small currency symbol. + */ +function bigAmount(amount: AmountJson): JSX.Element { + const v = amount.value + amount.fraction / Amounts.fractionalBase; return ( <span> <span style={{fontSize: "300%"}}>{v}</span> @@ -196,10 +203,10 @@ export function bigAmount(amount: AmountJson): JSX.Element { } class WalletBalanceView extends React.Component<any, any> { - balance: WalletBalance; - gotError = false; - canceler: (() => void) | undefined = undefined; - unmount = false; + private balance: WalletBalance; + private gotError = false; + private canceler: (() => void) | undefined = undefined; + private unmount = false; componentWillMount() { this.canceler = onUpdateNotification(() => this.updateBalance()); @@ -233,7 +240,7 @@ class WalletBalanceView extends React.Component<any, any> { } renderEmpty(): JSX.Element { - let helpLink = ( + const helpLink = ( <ExtensionLink target="/src/webex/pages/help/empty-wallet.html"> {i18n.str`help`} </ExtensionLink> @@ -281,20 +288,20 @@ class WalletBalanceView extends React.Component<any, any> { ); } - let l = [incoming, payment].filter((x) => x !== undefined); - if (l.length == 0) { + const l = [incoming, payment].filter((x) => x !== undefined); + if (l.length === 0) { return <span />; } - if (l.length == 1) { - return <span>({l})</span> + if (l.length === 1) { + return <span>({l})</span>; } return <span>({l[0]}, {l[1]})</span>; } render(): JSX.Element { - let wallet = this.balance; + const wallet = this.balance; if (this.gotError) { return i18n.str`Error: could not retrieve balance information.`; } @@ -303,9 +310,9 @@ class WalletBalanceView extends React.Component<any, any> { } console.log(wallet); let paybackAvailable = false; - let listing = Object.keys(wallet).map((key) => { - let entry: WalletBalanceEntry = wallet[key]; - if (entry.paybackAmount.value != 0 || entry.paybackAmount.fraction != 0) { + const listing = Object.keys(wallet).map((key) => { + const entry: WalletBalanceEntry = wallet[key]; + if (entry.paybackAmount.value !== 0 || entry.paybackAmount.fraction !== 0) { paybackAvailable = true; } return ( @@ -316,10 +323,10 @@ class WalletBalanceView extends React.Component<any, any> { </p> ); }); - let link = chrome.extension.getURL("/src/webex/pages/auditors.html"); - let linkElem = <a className="actionLink" href={link} target="_blank">Trusted Auditors and Exchanges</a>; - let paybackLink = chrome.extension.getURL("/src/webex/pages/payback.html"); - let paybackLinkElem = <a className="actionLink" href={link} target="_blank">Trusted Auditors and Exchanges</a>; + const link = chrome.extension.getURL("/src/webex/pages/auditors.html"); + const linkElem = <a className="actionLink" href={link} target="_blank">Trusted Auditors and Exchanges</a>; + const paybackLink = chrome.extension.getURL("/src/webex/pages/payback.html"); + const paybackLinkElem = <a className="actionLink" href={link} target="_blank">Trusted Auditors and Exchanges</a>; return ( <div> {listing.length > 0 ? listing : this.renderEmpty()} @@ -339,13 +346,15 @@ function formatHistoryItem(historyItem: HistoryRecord) { case "create-reserve": return ( <i18n.Translate wrap="p"> - Bank requested reserve (<span>{abbrev(d.reservePub)}</span>) for <span>{amountToPretty(d.requestedAmount)}</span>. + Bank requested reserve (<span>{abbrev(d.reservePub)}</span>) for + {" "} + <span>{amountToPretty(d.requestedAmount)}</span>. </i18n.Translate> ); case "confirm-reserve": { // FIXME: eventually remove compat fix - let exchange = d.exchangeBaseUrl ? (new URI(d.exchangeBaseUrl)).host() : "??"; - let pub = abbrev(d.reservePub); + const exchange = d.exchangeBaseUrl ? (new URI(d.exchangeBaseUrl)).host() : "??"; + const pub = abbrev(d.reservePub); return ( <i18n.Translate wrap="p"> Started to withdraw @@ -355,9 +364,9 @@ function formatHistoryItem(historyItem: HistoryRecord) { ); } case "offer-contract": { - let link = chrome.extension.getURL("view-contract.html"); - let linkElem = <a href={link}>{abbrev(d.contractHash)}</a>; - let merchantElem = <em>{abbrev(d.merchantName, 15)}</em>; + const link = chrome.extension.getURL("view-contract.html"); + const linkElem = <a href={link}>{abbrev(d.contractHash)}</a>; + const merchantElem = <em>{abbrev(d.merchantName, 15)}</em>; return ( <i18n.Translate wrap="p"> Merchant <em>{abbrev(d.merchantName, 15)}</em> offered contract <a href={link}>{abbrev(d.contractHash)}</a>; @@ -365,9 +374,9 @@ function formatHistoryItem(historyItem: HistoryRecord) { ); } case "depleted-reserve": { - let exchange = d.exchangeBaseUrl ? (new URI(d.exchangeBaseUrl)).host() : "??"; - let amount = amountToPretty(d.requestedAmount); - let pub = abbrev(d.reservePub); + const exchange = d.exchangeBaseUrl ? (new URI(d.exchangeBaseUrl)).host() : "??"; + const amount = amountToPretty(d.requestedAmount); + const pub = abbrev(d.reservePub); return ( <i18n.Translate wrap="p"> Withdrew <span>{amount}</span> from <span>{exchange}</span> (<span>{pub}</span>). @@ -375,12 +384,14 @@ function formatHistoryItem(historyItem: HistoryRecord) { ); } case "pay": { - let url = d.fulfillmentUrl; - let merchantElem = <em>{abbrev(d.merchantName, 15)}</em>; - let fulfillmentLinkElem = <a href={url} onClick={openTab(url)}>view product</a>; + const url = d.fulfillmentUrl; + const merchantElem = <em>{abbrev(d.merchantName, 15)}</em>; + const fulfillmentLinkElem = <a href={url} onClick={openTab(url)}>view product</a>; return ( <i18n.Translate wrap="p"> - Paid <span>{amountToPretty(d.amount)}</span> to merchant <span>{merchantElem}</span>. (<span>{fulfillmentLinkElem}</span>) + Paid <span>{amountToPretty(d.amount)}</span> to merchant <span>{merchantElem}</span>. + {" "} + (<span>{fulfillmentLinkElem}</span>) </i18n.Translate> ); } @@ -391,9 +402,9 @@ function formatHistoryItem(historyItem: HistoryRecord) { class WalletHistory extends React.Component<any, any> { - myHistory: any[]; - gotError = false; - unmounted = false; + private myHistory: any[]; + private gotError = false; + private unmounted = false; componentWillMount() { this.update(); @@ -426,7 +437,7 @@ class WalletHistory extends React.Component<any, any> { render(): JSX.Element { console.log("rendering history"); - let history: HistoryRecord[] = this.myHistory; + const history: HistoryRecord[] = this.myHistory; if (this.gotError) { return i18n.str`Error: could not retrieve event history`; } @@ -436,18 +447,18 @@ class WalletHistory extends React.Component<any, any> { return <span />; } - let subjectMemo: {[s: string]: boolean} = {}; - let listing: any[] = []; - for (let record of history.reverse()) { + const subjectMemo: {[s: string]: boolean} = {}; + const listing: any[] = []; + for (const record of history.reverse()) { if (record.subjectId && subjectMemo[record.subjectId]) { continue; } - if (record.level != undefined && record.level < HistoryLevel.User) { + if (record.level !== undefined && record.level < HistoryLevel.User) { continue; } subjectMemo[record.subjectId as string] = true; - let item = ( + const item = ( <div className="historyItem"> <div className="historyDate"> {(new Date(record.timestamp)).toString()} @@ -462,7 +473,7 @@ class WalletHistory extends React.Component<any, any> { if (listing.length > 0) { return <div className="container">{listing}</div>; } - return <p>{i18n.str`Your wallet has no events recorded.`}</p> + return <p>{i18n.str`Your wallet has no events recorded.`}</p>; } } @@ -513,24 +524,24 @@ function WalletDebug(props: any) { function openExtensionPage(page: string) { - return function() { + return () => { chrome.tabs.create({ - "url": chrome.extension.getURL(page) + url: chrome.extension.getURL(page), }); - } + }; } function openTab(page: string) { - return function() { + return () => { chrome.tabs.create({ - "url": page + url: page, }); - } + }; } -let el = ( +const el = ( <div> <WalletNavBar /> <div style={{margin: "1em"}}> @@ -545,4 +556,4 @@ let el = ( document.addEventListener("DOMContentLoaded", () => { ReactDOM.render(el, document.getElementById("content")!); -}) +}); diff --git a/src/webex/pages/tree.tsx b/src/webex/pages/tree.tsx index ddf8f2dbc..850a3c46d 100644 --- a/src/webex/pages/tree.tsx +++ b/src/webex/pages/tree.tsx @@ -34,9 +34,15 @@ import { import { ImplicitStateComponent, StateHolder } from "../components"; import { - getReserves, getExchanges, getCoins, getPreCoins, - refresh, getDenoms, payback, + getCoins, + getDenoms, + getExchanges, + getPreCoins, + getReserves, + payback, + refresh, } from "../wxApi"; + import * as React from "react"; import * as ReactDOM from "react-dom"; @@ -46,7 +52,7 @@ interface ReserveViewProps { class ReserveView extends React.Component<ReserveViewProps, void> { render(): JSX.Element { - let r: ReserveRecord = this.props.reserve; + const r: ReserveRecord = this.props.reserve; return ( <div className="tree-item"> <ul> @@ -71,11 +77,11 @@ interface ToggleProps { class Toggle extends ImplicitStateComponent<ToggleProps> { renderButton() { - let show = () => { + const show = () => { this.props.expanded(true); this.setState({}); }; - let hide = () => { + const hide = () => { this.props.expanded(false); this.setState({}); }; @@ -104,7 +110,7 @@ interface RefreshDialogProps { } class RefreshDialog extends ImplicitStateComponent<RefreshDialogProps> { - refreshRequested = this.makeState<boolean>(false); + private refreshRequested = this.makeState<boolean>(false); render(): JSX.Element { if (!this.refreshRequested()) { return ( @@ -125,7 +131,7 @@ class RefreshDialog extends ImplicitStateComponent<RefreshDialogProps> { class CoinView extends React.Component<CoinViewProps, void> { render() { - let c = this.props.coin; + const c = this.props.coin; return ( <div className="tree-item"> <ul> @@ -143,14 +149,13 @@ class CoinView extends React.Component<CoinViewProps, void> { } - interface PreCoinViewProps { precoin: PreCoinRecord; } class PreCoinView extends React.Component<PreCoinViewProps, void> { render() { - let c = this.props.precoin; + const c = this.props.precoin; return ( <div className="tree-item"> <ul> @@ -166,8 +171,8 @@ interface CoinListProps { } class CoinList extends ImplicitStateComponent<CoinListProps> { - coins = this.makeState<CoinRecord[] | null>(null); - expanded = this.makeState<boolean>(false); + private coins = this.makeState<CoinRecord[] | null>(null); + private expanded = this.makeState<boolean>(false); constructor(props: CoinListProps) { super(props); @@ -175,7 +180,7 @@ class CoinList extends ImplicitStateComponent<CoinListProps> { } async update(props: CoinListProps) { - let coins = await getCoins(props.exchangeBaseUrl); + const coins = await getCoins(props.exchangeBaseUrl); this.coins(coins); } @@ -205,8 +210,8 @@ interface PreCoinListProps { } class PreCoinList extends ImplicitStateComponent<PreCoinListProps> { - precoins = this.makeState<PreCoinRecord[] | null>(null); - expanded = this.makeState<boolean>(false); + private precoins = this.makeState<PreCoinRecord[] | null>(null); + private expanded = this.makeState<boolean>(false); constructor(props: PreCoinListProps) { super(props); @@ -214,7 +219,7 @@ class PreCoinList extends ImplicitStateComponent<PreCoinListProps> { } async update() { - let precoins = await getPreCoins(this.props.exchangeBaseUrl); + const precoins = await getPreCoins(this.props.exchangeBaseUrl); this.precoins(precoins); } @@ -243,8 +248,8 @@ interface ExpanderTextProps { } class ExpanderText extends ImplicitStateComponent<ExpanderTextProps> { - expanded = this.makeState<boolean>(false); - textArea: any = undefined; + private expanded = this.makeState<boolean>(false); + private textArea: any = undefined; componentDidUpdate() { if (this.expanded() && this.textArea) { @@ -258,10 +263,10 @@ class ExpanderText extends ImplicitStateComponent<ExpanderTextProps> { return ( <span onClick={() => { this.expanded(true); }}> {(this.props.text.length <= 10) - ? this.props.text + ? this.props.text : ( <span> - {this.props.text.substring(0,10)} + {this.props.text.substring(0, 10)} <span style={{textDecoration: "underline"}}>...</span> </span> ) @@ -282,8 +287,8 @@ class ExpanderText extends ImplicitStateComponent<ExpanderTextProps> { } class DenominationList extends ImplicitStateComponent<DenominationListProps> { - expanded = this.makeState<boolean>(false); - denoms = this.makeState<undefined|DenominationRecord[]>(undefined); + private expanded = this.makeState<boolean>(false); + private denoms = this.makeState<undefined|DenominationRecord[]>(undefined); constructor(props: DenominationListProps) { super(props); @@ -291,7 +296,7 @@ class DenominationList extends ImplicitStateComponent<DenominationListProps> { } async update() { - let d = await getDenoms(this.props.exchange.baseUrl); + const d = await getDenoms(this.props.exchange.baseUrl); this.denoms(d); } @@ -316,7 +321,7 @@ class DenominationList extends ImplicitStateComponent<DenominationListProps> { } render(): JSX.Element { - let denoms = this.denoms() + const denoms = this.denoms(); if (!denoms) { return ( <div className="tree-item"> @@ -340,9 +345,10 @@ class DenominationList extends ImplicitStateComponent<DenominationListProps> { } } + class ReserveList extends ImplicitStateComponent<ReserveListProps> { - reserves = this.makeState<ReserveRecord[] | null>(null); - expanded = this.makeState<boolean>(false); + private reserves = this.makeState<ReserveRecord[] | null>(null); + private expanded = this.makeState<boolean>(false); constructor(props: ReserveListProps) { super(props); @@ -350,7 +356,7 @@ class ReserveList extends ImplicitStateComponent<ReserveListProps> { } async update() { - let reserves = await getReserves(this.props.exchangeBaseUrl); + const reserves = await getReserves(this.props.exchangeBaseUrl); this.reserves(reserves); } @@ -376,7 +382,7 @@ interface ExchangeProps { class ExchangeView extends React.Component<ExchangeProps, void> { render(): JSX.Element { - let e = this.props.exchange; + const e = this.props.exchange; return ( <div className="tree-item"> <ul> @@ -399,7 +405,7 @@ interface ExchangesListState { class ExchangesList extends React.Component<any, ExchangesListState> { constructor() { super(); - let port = chrome.runtime.connect(); + const port = chrome.runtime.connect(); port.onMessage.addListener((msg: any) => { if (msg.notify) { console.log("got notified"); @@ -411,26 +417,26 @@ class ExchangesList extends React.Component<any, ExchangesListState> { } async update() { - let exchanges = await getExchanges(); + const exchanges = await getExchanges(); console.log("exchanges: ", exchanges); this.setState({ exchanges }); } render(): JSX.Element { - let exchanges = this.state.exchanges; + const exchanges = this.state.exchanges; if (!exchanges) { return <span>...</span>; } return ( <div className="tree-item"> Exchanges ({exchanges.length.toString()}): - {exchanges.map(e => <ExchangeView exchange={e} />)} + {exchanges.map((e) => <ExchangeView exchange={e} />)} </div> ); } } -export function main() { +function main() { ReactDOM.render(<ExchangesList />, document.getElementById("container")!); } |