style, deduplication and doc comments

src/helpers.ts

@@ -15,8 +15,7 @@
  */
 
 /**
- * Smaller helper functions that do not depend
- * on the emscripten machinery.
+ * Small helper functions that don't fit anywhere else.
  */
 
 /**

src/pages/add-auditor.tsx

@@ -36,7 +36,6 @@ import {
   getCurrencies,
   updateCurrency,
 } from "../wxApi";
-import { prettyAmount } from "../renderHtml";
 import { getTalerStampDate } from "../helpers";
 
 import * as React from "react";

src/pages/auditors.tsx

@@ -37,7 +37,6 @@ import {
   getCurrencies,
   updateCurrency,
 } from "../wxApi";
-import { prettyAmount } from "../renderHtml";
 import { getTalerStampDate } from "../helpers";
 import * as React from "react";
 import * as ReactDOM from "react-dom";

src/pages/confirm-contract.tsx

@@ -23,10 +23,10 @@
 /**
  * Imports.
  */
-import {Contract, AmountJson, ExchangeRecord} from "../types";
-import {OfferRecord} from "../wallet";
-import {renderContract, prettyAmount} from "../renderHtml";
-import {getExchanges} from "../wxApi";
+import { Contract, AmountJson, ExchangeRecord } from "../types";
+import { OfferRecord } from "../wallet";
+import { renderContract } from "../renderHtml";
+import { getExchanges } from "../wxApi";
 import * as i18n from "../i18n";
 import * as React from "react";
 import * as ReactDOM from "react-dom";

src/pages/payback.tsx

@@ -40,8 +40,7 @@ import {
   getPaybackReserves,
   withdrawPaybackReserve,
 } from "../wxApi";
-import { prettyAmount } from "../renderHtml";
-import { getTalerStampDate } from "../helpers";
+import { amountToPretty, getTalerStampDate } from "../helpers";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 
@@ -80,7 +79,7 @@ class Payback extends ImplicitStateComponent<any> {
       <div>
         {reserves.map(r => (
           <div>
-            <h2>Reserve for ${prettyAmount(r.current_amount!)}</h2>
+            <h2>Reserve for ${amountToPretty(r.current_amount!)}</h2>
             <ul>
               <li>Exchange: ${r.exchange_base_url}</li>
             </ul>

src/pages/popup.tsx

@@ -26,12 +26,13 @@
 "use strict";
 
 import BrowserClickedEvent = chrome.browserAction.BrowserClickedEvent;
-import {HistoryRecord, HistoryLevel} from "../wallet";
+import { HistoryRecord, HistoryLevel } from "../wallet";
 import {
   AmountJson, WalletBalance, Amounts,
   WalletBalanceEntry
 } from "../types";
-import {abbrev, prettyAmount} from "../renderHtml";
+import { amountToPretty } from "../helpers";
+import { abbrev } from "../renderHtml";
 import * as i18n from "../i18n";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
@@ -249,15 +250,15 @@ class WalletBalanceView extends React.Component<any, any> {
     let incoming: JSX.Element | undefined;
     let payment: JSX.Element | undefined;
 
-    console.log("available: ", entry.pendingIncoming ? prettyAmount(entry.available) : null);
-    console.log("incoming: ", entry.pendingIncoming ? prettyAmount(entry.pendingIncoming) : null);
+    console.log("available: ", entry.pendingIncoming ? amountToPretty(entry.available) : null);
+    console.log("incoming: ", entry.pendingIncoming ? amountToPretty(entry.pendingIncoming) : null);
 
     if (Amounts.isNonZero(entry.pendingIncoming)) {
       incoming = (
         <i18n.Translate wrap="span">
           <span style={{color: "darkgreen"}}>
             {"+"}
-            {prettyAmount(entry.pendingIncoming)}
+            {amountToPretty(entry.pendingIncoming)}
           </span>
           {" "}
           incoming
@@ -269,7 +270,7 @@ class WalletBalanceView extends React.Component<any, any> {
       payment = (
         <i18n.Translate wrap="span">
           <span style={{color: "darkblue"}}>
-            {prettyAmount(entry.pendingPayment)}
+            {amountToPretty(entry.pendingPayment)}
           </span>
           {" "}
           being spent
@@ -335,7 +336,7 @@ function formatHistoryItem(historyItem: HistoryRecord) {
     case "create-reserve":
       return (
         <i18n.Translate wrap="p">
-          Bank requested reserve (<span>{abbrev(d.reservePub)}</span>) for <span>{prettyAmount(d.requestedAmount)}</span>.
+          Bank requested reserve (<span>{abbrev(d.reservePub)}</span>) for <span>{amountToPretty(d.requestedAmount)}</span>.
         </i18n.Translate>
       );
     case "confirm-reserve": {
@@ -345,7 +346,7 @@ function formatHistoryItem(historyItem: HistoryRecord) {
       return (
         <i18n.Translate wrap="p">
           Started to withdraw
-          {" "}{prettyAmount(d.requestedAmount)}{" "}
+          {" "}{amountToPretty(d.requestedAmount)}{" "}
           from <span>{exchange}</span> (<span>{pub}</span>).
         </i18n.Translate>
       );
@@ -362,7 +363,7 @@ function formatHistoryItem(historyItem: HistoryRecord) {
     }
     case "depleted-reserve": {
       let exchange = d.exchangeBaseUrl ? (new URI(d.exchangeBaseUrl)).host() : "??";
-      let amount = prettyAmount(d.requestedAmount);
+      let amount = amountToPretty(d.requestedAmount);
       let pub = abbrev(d.reservePub);
       return (
         <i18n.Translate wrap="p">
@@ -376,7 +377,7 @@ function formatHistoryItem(historyItem: HistoryRecord) {
       let fulfillmentLinkElem = <a href={url} onClick={openTab(url)}>view product</a>;
       return (
         <i18n.Translate wrap="p">
-          Paid <span>{prettyAmount(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>
       );
     }

src/pages/tree.tsx

@@ -35,8 +35,7 @@ import {
   getReserves, getExchanges, getCoins, getPreCoins,
   refresh, getDenoms, payback,
 } from "../wxApi";
-import { prettyAmount } from "../renderHtml";
-import { getTalerStampDate } from "../helpers";
+import { amountToPretty, getTalerStampDate } from "../helpers";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 
@@ -52,8 +51,8 @@ class ReserveView extends React.Component<ReserveViewProps, void> {
         <ul>
           <li>Key: {r.reserve_pub}</li>
           <li>Created: {(new Date(r.created * 1000).toString())}</li>
-          <li>Current: {r.current_amount ? prettyAmount(r.current_amount!) : "null"}</li>
-          <li>Requested: {prettyAmount(r.requested_amount)}</li>
+          <li>Current: {r.current_amount ? amountToPretty(r.current_amount!) : "null"}</li>
+          <li>Requested: {amountToPretty(r.requested_amount)}</li>
           <li>Confirmed: {r.confirmed}</li>
         </ul>
       </div>
@@ -130,7 +129,7 @@ class CoinView extends React.Component<CoinViewProps, void> {
       <div className="tree-item">
         <ul>
           <li>Key: {c.coinPub}</li>
-          <li>Current amount: {prettyAmount(c.currentAmount)}</li>
+          <li>Current amount: {amountToPretty(c.currentAmount)}</li>
           <li>Denomination: <ExpanderText text={c.denomPub} /></li>
           <li>Suspended: {(c.suspended || false).toString()}</li>
           <li>Status: {CoinStatus[c.status]}</li>
@@ -300,11 +299,11 @@ class DenominationList extends ImplicitStateComponent<DenominationListProps> {
       <div className="tree-item">
         <ul>
           <li>Offered: {d.isOffered ? "yes" : "no"}</li>
-          <li>Value: {prettyAmount(d.value)}</li>
-          <li>Withdraw fee: {prettyAmount(d.feeWithdraw)}</li>
-          <li>Refresh fee: {prettyAmount(d.feeRefresh)}</li>
-          <li>Deposit fee: {prettyAmount(d.feeDeposit)}</li>
-          <li>Refund fee: {prettyAmount(d.feeRefund)}</li>
+          <li>Value: {amountToPretty(d.value)}</li>
+          <li>Withdraw fee: {amountToPretty(d.feeWithdraw)}</li>
+          <li>Refresh fee: {amountToPretty(d.feeRefresh)}</li>
+          <li>Deposit fee: {amountToPretty(d.feeDeposit)}</li>
+          <li>Refund fee: {amountToPretty(d.feeRefund)}</li>
           <li>Start: {getTalerStampDate(d.stampStart)!.toString()}</li>
           <li>Withdraw expiration: {getTalerStampDate(d.stampExpireWithdraw)!.toString()}</li>
           <li>Legal expiration: {getTalerStampDate(d.stampExpireLegal)!.toString()}</li>

src/renderHtml.tsx

@@ -21,14 +21,18 @@
  */
 
 
-import {AmountJson, Contract, Amounts} from "./types";
+/**
+ * Imports.
+ */
+import {
+  AmountJson,
+  Amounts,
+  Contract,
+} from "./types";
 import * as i18n from "./i18n";
+import { amountToPretty } from "./helpers";
 import * as React from "react";
 
-export function prettyAmount(amount: AmountJson) {
-  let v = amount.value + amount.fraction / Amounts.fractionalBase;
-  return `${v} ${amount.currency}`;
-}
 
 export function renderContract(contract: Contract): JSX.Element {
   let merchantName;
@@ -37,7 +41,7 @@ export function renderContract(contract: Contract): JSX.Element {
   } else {
     merchantName = <strong>(pub: {contract.merchant_pub})</strong>;
   }
-  let amount = <strong>{prettyAmount(contract.amount)}</strong>;
+  let amount = <strong>{amountToPretty(contract.amount)}</strong>;
 
   return (
     <div>
@@ -49,7 +53,7 @@ export function renderContract(contract: Contract): JSX.Element {
       <p>{i18n.str`You are about to purchase:`}</p>
       <ul>
         {contract.products.map(
-          (p: any, i: number) => (<li key={i}>{`${p.description}: ${prettyAmount(p.price)}`}</li>))
+          (p: any, i: number) => (<li key={i}>{`${p.description}: ${amountToPretty(p.price)}`}</li>))
         }
       </ul>
     </div>
@@ -57,6 +61,10 @@ export function renderContract(contract: Contract): JSX.Element {
 }
 
 
+/**
+ * Abbreviate a string to a given length, and show the full
+ * string on hover as a tooltip.
+ */
 export function abbrev(s: string, n: number = 5) {
   let sAbbrev = s;
   if (s.length > n) {