fix linter errors

3 files changed, 136 insertions, 117 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")!);
 }
 
diff --git a/src/webex/renderHtml.tsx b/src/webex/renderHtml.tsx
index 440cd5789..d6f923aa1 100644
--- a/src/webex/renderHtml.tsx
+++ b/src/webex/renderHtml.tsx
@@ -24,17 +24,19 @@
 /**
  * Imports.
  */
+import { amountToPretty } from "../helpers";
+import * as i18n from "../i18n";
 import {
   AmountJson,
   Amounts,
   Contract,
 } from "../types";
-import * as i18n from "../i18n";
-import { amountToPretty } from "../helpers";
 
 import * as React from "react";
 
-
+/**
+ * Render contract terms for the end user to view.
+ */
 export function renderContract(contract: Contract): JSX.Element {
   let merchantName;
   if (contract.merchant && contract.merchant.name) {
@@ -42,7 +44,7 @@ export function renderContract(contract: Contract): JSX.Element {
   } else {
     merchantName = <strong>(pub: {contract.merchant_pub})</strong>;
   }
-  let amount = <strong>{amountToPretty(contract.amount)}</strong>;
+  const amount = <strong>{amountToPretty(contract.amount)}</strong>;
 
   return (
     <div>