586 lines
15 KiB
TypeScript
586 lines
15 KiB
TypeScript
/*
|
|
This file is part of TALER
|
|
(C) 2016 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 <http://www.gnu.org/licenses/>
|
|
*/
|
|
|
|
|
|
/**
|
|
* Popup shown to the user when they click
|
|
* the Taler browser action button.
|
|
*
|
|
* @author Florian Dold
|
|
*/
|
|
|
|
/**
|
|
* Imports.
|
|
*/
|
|
import * as i18n from "../../i18n";
|
|
|
|
import { runOnceWhenReady } from "./common";
|
|
|
|
import { AmountJson } from "../../amounts";
|
|
import * as Amounts from "../../amounts";
|
|
|
|
import {
|
|
HistoryRecord,
|
|
WalletBalance,
|
|
WalletBalanceEntry,
|
|
} from "../../walletTypes";
|
|
|
|
import { abbrev, renderAmount } from "../renderHtml";
|
|
import * as wxApi from "../wxApi";
|
|
|
|
import * as React from "react";
|
|
import * as ReactDOM from "react-dom";
|
|
|
|
import URI = require("urijs");
|
|
|
|
function onUpdateNotification(f: () => void): () => void {
|
|
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> {
|
|
static setRoute(s: string): void {
|
|
window.location.hash = s;
|
|
}
|
|
|
|
static getRoute(): string {
|
|
// Omit the '#' at the beginning
|
|
return window.location.hash.substring(1);
|
|
}
|
|
|
|
static onRoute(f: any): () => void {
|
|
Router.routeHandlers.push(f);
|
|
return () => {
|
|
const i = Router.routeHandlers.indexOf(f);
|
|
this.routeHandlers = this.routeHandlers.splice(i, 1);
|
|
};
|
|
}
|
|
|
|
private static routeHandlers: any[] = [];
|
|
|
|
componentWillMount() {
|
|
console.log("router mounted");
|
|
window.onhashchange = () => {
|
|
this.setState({});
|
|
for (const f of Router.routeHandlers) {
|
|
f();
|
|
}
|
|
};
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
console.log("router unmounted");
|
|
}
|
|
|
|
|
|
render(): JSX.Element {
|
|
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) => {
|
|
const childProps: any = (child as any).props;
|
|
if (!childProps) {
|
|
return;
|
|
}
|
|
if (childProps.default) {
|
|
defaultChild = child as React.ReactChild;
|
|
}
|
|
if (childProps.route === route) {
|
|
foundChild = child as React.ReactChild;
|
|
}
|
|
});
|
|
const c: React.ReactChild | null = foundChild || defaultChild;
|
|
if (!c) {
|
|
throw Error("unknown route");
|
|
}
|
|
Router.setRoute((c as any).props.route);
|
|
return <div>{c}</div>;
|
|
}
|
|
}
|
|
|
|
|
|
interface TabProps {
|
|
target: string;
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
function Tab(props: TabProps) {
|
|
let cssClass = "";
|
|
if (props.target === Router.getRoute()) {
|
|
cssClass = "active";
|
|
}
|
|
const onClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
|
|
Router.setRoute(props.target);
|
|
e.preventDefault();
|
|
};
|
|
return (
|
|
<a onClick={onClick} href={props.target} className={cssClass}>
|
|
{props.children}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
|
|
class WalletNavBar extends React.Component<any, any> {
|
|
private cancelSubscription: any;
|
|
|
|
componentWillMount() {
|
|
this.cancelSubscription = Router.onRoute(() => {
|
|
this.setState({});
|
|
});
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
if (this.cancelSubscription) {
|
|
this.cancelSubscription();
|
|
}
|
|
}
|
|
|
|
render() {
|
|
console.log("rendering nav bar");
|
|
return (
|
|
<div className="nav" id="header">
|
|
<Tab target="/balance">
|
|
{i18n.str`Balance`}
|
|
</Tab>
|
|
<Tab target="/history">
|
|
{i18n.str`History`}
|
|
</Tab>
|
|
<Tab target="/debug">
|
|
{i18n.str`Debug`}
|
|
</Tab>
|
|
</div>);
|
|
}
|
|
}
|
|
|
|
|
|
function ExtensionLink(props: any) {
|
|
const onClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
|
|
chrome.tabs.create({
|
|
url: chrome.extension.getURL(props.target),
|
|
});
|
|
e.preventDefault();
|
|
};
|
|
return (
|
|
<a onClick={onClick} href={props.target}>
|
|
{props.children}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
|
|
/**
|
|
* 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>
|
|
{" "}
|
|
<span>{amount.currency}</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
class WalletBalanceView extends React.Component<any, any> {
|
|
private balance: WalletBalance;
|
|
private gotError = false;
|
|
private canceler: (() => void) | undefined = undefined;
|
|
private unmount = false;
|
|
|
|
componentWillMount() {
|
|
this.canceler = onUpdateNotification(() => this.updateBalance());
|
|
this.updateBalance();
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
console.log("component WalletBalanceView will unmount");
|
|
if (this.canceler) {
|
|
this.canceler();
|
|
}
|
|
this.unmount = true;
|
|
}
|
|
|
|
async updateBalance() {
|
|
let balance: WalletBalance;
|
|
try {
|
|
balance = await wxApi.getBalance();
|
|
} catch (e) {
|
|
if (this.unmount) {
|
|
return;
|
|
}
|
|
this.gotError = true;
|
|
console.error("could not retrieve balances", e);
|
|
this.setState({});
|
|
return;
|
|
}
|
|
if (this.unmount) {
|
|
return;
|
|
}
|
|
this.gotError = false;
|
|
console.log("got balance", balance);
|
|
this.balance = balance;
|
|
this.setState({});
|
|
}
|
|
|
|
renderEmpty(): JSX.Element {
|
|
const helpLink = (
|
|
<ExtensionLink target="/src/webex/pages/help/empty-wallet.html">
|
|
{i18n.str`help`}
|
|
</ExtensionLink>
|
|
);
|
|
return (
|
|
<div>
|
|
<i18n.Translate wrap="p">
|
|
You have no balance to show. Need some
|
|
{" "}<span>{helpLink}</span>{" "}
|
|
getting started?
|
|
</i18n.Translate>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
formatPending(entry: WalletBalanceEntry): JSX.Element {
|
|
let incoming: JSX.Element | undefined;
|
|
let payment: JSX.Element | undefined;
|
|
|
|
console.log("available: ", entry.pendingIncoming ? renderAmount(entry.available) : null);
|
|
console.log("incoming: ", entry.pendingIncoming ? renderAmount(entry.pendingIncoming) : null);
|
|
|
|
if (Amounts.isNonZero(entry.pendingIncoming)) {
|
|
incoming = (
|
|
<i18n.Translate wrap="span">
|
|
<span style={{color: "darkgreen"}}>
|
|
{"+"}
|
|
{renderAmount(entry.pendingIncoming)}
|
|
</span>
|
|
{" "}
|
|
incoming
|
|
</i18n.Translate>
|
|
);
|
|
}
|
|
|
|
if (Amounts.isNonZero(entry.pendingPayment)) {
|
|
payment = (
|
|
<i18n.Translate wrap="span">
|
|
<span style={{color: "red"}}>
|
|
{"-"}
|
|
{renderAmount(entry.pendingPayment)}
|
|
</span>
|
|
{" "}
|
|
being spent
|
|
</i18n.Translate>
|
|
);
|
|
}
|
|
|
|
const l = [incoming, payment].filter((x) => x !== undefined);
|
|
if (l.length === 0) {
|
|
return <span />;
|
|
}
|
|
|
|
if (l.length === 1) {
|
|
return <span>({l})</span>;
|
|
}
|
|
return <span>({l[0]}, {l[1]})</span>;
|
|
|
|
}
|
|
|
|
render(): JSX.Element {
|
|
const wallet = this.balance;
|
|
if (this.gotError) {
|
|
return i18n.str`Error: could not retrieve balance information.`;
|
|
}
|
|
if (!wallet) {
|
|
return <span></span>;
|
|
}
|
|
console.log(wallet);
|
|
let paybackAvailable = false;
|
|
const listing = Object.keys(wallet.byCurrency).map((key) => {
|
|
const entry: WalletBalanceEntry = wallet.byCurrency[key];
|
|
if (entry.paybackAmount.value !== 0 || entry.paybackAmount.fraction !== 0) {
|
|
paybackAvailable = true;
|
|
}
|
|
return (
|
|
<p>
|
|
{bigAmount(entry.available)}
|
|
{" "}
|
|
{this.formatPending(entry)}
|
|
</p>
|
|
);
|
|
});
|
|
const makeLink = (page: string, name: string) => {
|
|
const url = chrome.extension.getURL(`/src/webex/pages/${page}`);
|
|
return <div><a className="actionLink" href={url} target="_blank">{name}</a></div>;
|
|
};
|
|
return (
|
|
<div>
|
|
{listing.length > 0 ? listing : this.renderEmpty()}
|
|
{paybackAvailable && makeLink("payback", i18n.str`Payback`)}
|
|
{makeLink("return-coins.html#dissolve", i18n.str`Return Electronic Cash to Bank Account`)}
|
|
{makeLink("auditors.html", i18n.str`Manage Trusted Auditors and Exchanges`)}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
function formatHistoryItem(historyItem: HistoryRecord) {
|
|
const d = historyItem.detail;
|
|
console.log("hist item", historyItem);
|
|
switch (historyItem.type) {
|
|
case "create-reserve":
|
|
return (
|
|
<i18n.Translate wrap="p">
|
|
Bank requested reserve (<span>{abbrev(d.reservePub)}</span>) for
|
|
{" "}
|
|
<span>{renderAmount(d.requestedAmount)}</span>.
|
|
</i18n.Translate>
|
|
);
|
|
case "confirm-reserve": {
|
|
const exchange = (new URI(d.exchangeBaseUrl)).host();
|
|
const pub = abbrev(d.reservePub);
|
|
return (
|
|
<i18n.Translate wrap="p">
|
|
Started to withdraw
|
|
<span>{renderAmount(d.requestedAmount)}</span>
|
|
from <span>{exchange}</span> (<span>{pub}</span>).
|
|
</i18n.Translate>
|
|
);
|
|
}
|
|
case "offer-contract": {
|
|
return (
|
|
<i18n.Translate wrap="p">
|
|
Merchant <em>{abbrev(d.merchantName, 15)}</em> offered
|
|
contract <span>{abbrev(d.contractTermsHash)}</span>.
|
|
</i18n.Translate>
|
|
);
|
|
}
|
|
case "depleted-reserve": {
|
|
const exchange = d.exchangeBaseUrl ? (new URI(d.exchangeBaseUrl)).host() : "??";
|
|
const amount = renderAmount(d.requestedAmount);
|
|
const pub = abbrev(d.reservePub);
|
|
return (
|
|
<i18n.Translate wrap="p">
|
|
Withdrew <span>{amount}</span> from <span>{exchange}</span> (<span>{pub}</span>).
|
|
</i18n.Translate>
|
|
);
|
|
}
|
|
case "pay": {
|
|
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>{renderAmount(d.amount)}</span> to merchant <span>{merchantElem}</span>.
|
|
<span> </span>
|
|
(<span>{fulfillmentLinkElem}</span>)
|
|
</i18n.Translate>
|
|
);
|
|
}
|
|
case "refund": {
|
|
const merchantElem = <em>{abbrev(d.merchantName, 15)}</em>;
|
|
return (
|
|
<i18n.Translate wrap="p">
|
|
Merchant <span>{merchantElem}</span> gave a refund over <span>{renderAmount(d.refundAmount)}</span>.
|
|
</i18n.Translate>
|
|
);
|
|
}
|
|
case "tip": {
|
|
const tipPageUrl = new URI(chrome.extension.getURL("/src/webex/pages/tip.html"));
|
|
const params = { tip_id: d.tipId, merchant_domain: d.merchantDomain };
|
|
const url = tipPageUrl.query(params).href();
|
|
const tipLink = <a href={url} onClick={openTab(url)}>{i18n.str`tip`}</a>;
|
|
// i18n: Tip
|
|
return (
|
|
<>
|
|
<i18n.Translate wrap="p">
|
|
Merchant <span>{d.merchantDomain}</span> gave
|
|
a <span>{tipLink}</span> of <span>{renderAmount(d.amount)}</span>.
|
|
</i18n.Translate>
|
|
<span> { d.accepted ? null : <i18n.Translate>You did not accept the tip yet.</i18n.Translate> }</span>
|
|
</>
|
|
);
|
|
}
|
|
default:
|
|
return (<p>{i18n.str`Unknown event (${historyItem.type})`}</p>);
|
|
}
|
|
}
|
|
|
|
|
|
class WalletHistory extends React.Component<any, any> {
|
|
private myHistory: any[];
|
|
private gotError = false;
|
|
private unmounted = false;
|
|
|
|
componentWillMount() {
|
|
this.update();
|
|
onUpdateNotification(() => this.update());
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
console.log("history component unmounted");
|
|
this.unmounted = true;
|
|
}
|
|
|
|
update() {
|
|
chrome.runtime.sendMessage({type: "get-history"}, (resp) => {
|
|
if (this.unmounted) {
|
|
return;
|
|
}
|
|
console.log("got history response");
|
|
if (resp.error) {
|
|
this.gotError = true;
|
|
console.error("could not retrieve history", resp);
|
|
this.setState({});
|
|
return;
|
|
}
|
|
this.gotError = false;
|
|
console.log("got history", resp.history);
|
|
this.myHistory = resp.history;
|
|
this.setState({});
|
|
});
|
|
}
|
|
|
|
render(): JSX.Element {
|
|
console.log("rendering history");
|
|
const history: HistoryRecord[] = this.myHistory;
|
|
if (this.gotError) {
|
|
return i18n.str`Error: could not retrieve event history`;
|
|
}
|
|
|
|
if (!history) {
|
|
// We're not ready yet
|
|
return <span />;
|
|
}
|
|
|
|
const listing: any[] = [];
|
|
for (const record of history.reverse()) {
|
|
const item = (
|
|
<div className="historyItem">
|
|
<div className="historyDate">
|
|
{(new Date(record.timestamp)).toString()}
|
|
</div>
|
|
{formatHistoryItem(record)}
|
|
</div>
|
|
);
|
|
|
|
listing.push(item);
|
|
}
|
|
|
|
if (listing.length > 0) {
|
|
return <div className="container">{listing}</div>;
|
|
}
|
|
return <p>{i18n.str`Your wallet has no events recorded.`}</p>;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
function reload() {
|
|
try {
|
|
chrome.runtime.reload();
|
|
window.close();
|
|
} catch (e) {
|
|
// Functionality missing in firefox, ignore!
|
|
}
|
|
}
|
|
|
|
function confirmReset() {
|
|
if (confirm("Do you want to IRREVOCABLY DESTROY everything inside your" +
|
|
" wallet and LOSE ALL YOUR COINS?")) {
|
|
wxApi.resetDb();
|
|
window.close();
|
|
}
|
|
}
|
|
|
|
|
|
function WalletDebug(props: any) {
|
|
return (<div>
|
|
<p>Debug tools:</p>
|
|
<button onClick={openExtensionPage("/src/webex/pages/popup.html")}>
|
|
wallet tab
|
|
</button>
|
|
<button onClick={openExtensionPage("/src/webex/pages/benchmark.html")}>
|
|
benchmark
|
|
</button>
|
|
<button onClick={openExtensionPage("/src/webex/pages/show-db.html")}>
|
|
show db
|
|
</button>
|
|
<button onClick={openExtensionPage("/src/webex/pages/tree.html")}>
|
|
show tree
|
|
</button>
|
|
<button onClick={openExtensionPage("/src/webex/pages/logs.html")}>
|
|
show logs
|
|
</button>
|
|
<br />
|
|
<button onClick={confirmReset}>
|
|
reset
|
|
</button>
|
|
<button onClick={reload}>
|
|
reload chrome extension
|
|
</button>
|
|
</div>);
|
|
}
|
|
|
|
|
|
function openExtensionPage(page: string) {
|
|
return () => {
|
|
chrome.tabs.create({
|
|
url: chrome.extension.getURL(page),
|
|
});
|
|
};
|
|
}
|
|
|
|
|
|
function openTab(page: string) {
|
|
return (evt: React.SyntheticEvent<any>) => {
|
|
evt.preventDefault();
|
|
chrome.tabs.create({
|
|
url: page,
|
|
});
|
|
};
|
|
}
|
|
|
|
|
|
const el = (
|
|
<div>
|
|
<WalletNavBar />
|
|
<div style={{margin: "1em"}}>
|
|
<Router>
|
|
<WalletBalanceView route="/balance" default/>
|
|
<WalletHistory route="/history"/>
|
|
<WalletDebug route="/debug"/>
|
|
</Router>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
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
|
|
chrome.runtime.connect({name: "popup"});
|
|
});
|