diff options
19 files changed, 1068 insertions, 1078 deletions
diff --git a/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx b/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx new file mode 100644 index 000000000..7534629fb --- /dev/null +++ b/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx @@ -0,0 +1,47 @@ +/* + 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/> + */ + + import { JSX } from "preact"; + +export function DebugCheckbox({ enabled, onToggle }: { enabled: boolean; onToggle: () => void; }): JSX.Element { + return ( + <div> + <input + checked={enabled} + onClick={onToggle} + type="checkbox" + id="checkbox-perm" + style={{ width: "1.5em", height: "1.5em", verticalAlign: "middle" }} /> + <label + htmlFor="checkbox-perm" + style={{ marginLeft: "0.5em", fontWeight: "bold" }} + > + Automatically open wallet based on page content + </label> + <span + style={{ + color: "#383838", + fontSize: "smaller", + display: "block", + marginLeft: "2em", + }} + > + (Enabling this option below will make using the wallet faster, but + requires more permissions from your browser.) + </span> + </div> + ); +} diff --git a/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts b/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts new file mode 100644 index 000000000..809863dc5 --- /dev/null +++ b/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts @@ -0,0 +1,53 @@ +import { useState, useEffect } from "preact/hooks"; +import * as wxApi from "../wxApi"; +import { getPermissionsApi } from "../compat"; +import { extendedPermissions } from "../permissions"; + + +export function useExtendedPermissions(): [boolean, () => void] { + const [enabled, setEnabled] = useState(false); + + const toggle = () => { + setEnabled(v => !v); + handleExtendedPerm(enabled).then(result => { + setEnabled(result); + }); + }; + + useEffect(() => { + async function getExtendedPermValue(): Promise<void> { + const res = await wxApi.getExtendedPermissions(); + setEnabled(res.newValue); + } + getExtendedPermValue(); + }, []); + return [enabled, toggle]; +} + +async function handleExtendedPerm(isEnabled: boolean): Promise<boolean> { + let nextVal: boolean | undefined; + + if (!isEnabled) { + const granted = await new Promise<boolean>((resolve, reject) => { + // We set permissions here, since apparently FF wants this to be done + // as the result of an input event ... + getPermissionsApi().request(extendedPermissions, (granted: boolean) => { + if (chrome.runtime.lastError) { + console.error("error requesting permissions"); + console.error(chrome.runtime.lastError); + reject(chrome.runtime.lastError); + return; + } + console.log("permissions granted:", granted); + resolve(granted); + }); + }); + const res = await wxApi.setExtendedPermissions(granted); + nextVal = res.newValue; + } else { + const res = await wxApi.setExtendedPermissions(false); + nextVal = res.newValue; + } + console.log("new permissions applied:", nextVal ?? false); + return nextVal ?? false +}
\ No newline at end of file diff --git a/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.tsx b/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.tsx deleted file mode 100644 index f5c788cf6..000000000 --- a/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { useState, useEffect } from "preact/hooks"; -import * as wxApi from "../wxApi"; -import { handleExtendedPerm } from "../wallet/welcome"; - - -export function useExtendedPermissions(): [boolean, () => void] { - const [enabled, setEnabled] = useState(false); - - const toggle = () => { - setEnabled(v => !v); - handleExtendedPerm(enabled).then(result => { - setEnabled(result); - }); - }; - - useEffect(() => { - async function getExtendedPermValue(): Promise<void> { - const res = await wxApi.getExtendedPermissions(); - setEnabled(res.newValue); - } - getExtendedPermValue(); - }, []); - return [enabled, toggle]; -} diff --git a/packages/taler-wallet-webextension/src/hooks/useTalerActionURL.ts b/packages/taler-wallet-webextension/src/hooks/useTalerActionURL.ts new file mode 100644 index 000000000..b884ca943 --- /dev/null +++ b/packages/taler-wallet-webextension/src/hooks/useTalerActionURL.ts @@ -0,0 +1,93 @@ +import { classifyTalerUri, TalerUriType } from "@gnu-taler/taler-util"; +import { useEffect, useState } from "preact/hooks"; + +export function useTalerActionURL(): [string | undefined, (s: boolean) => void] { + const [talerActionUrl, setTalerActionUrl] = useState<string | undefined>( + undefined + ); + const [dismissed, setDismissed] = useState(false); + useEffect(() => { + async function check(): Promise<void> { + const talerUri = await findTalerUriInActiveTab(); + if (talerUri) { + const actionUrl = actionForTalerUri(talerUri); + setTalerActionUrl(actionUrl); + } + } + check(); + }, []); + const url = dismissed ? undefined : talerActionUrl; + return [url, setDismissed]; +} + +function actionForTalerUri(talerUri: string): string | undefined { + const uriType = classifyTalerUri(talerUri); + switch (uriType) { + case TalerUriType.TalerWithdraw: + return makeExtensionUrlWithParams("static/wallet.html#/withdraw", { + talerWithdrawUri: talerUri, + }); + case TalerUriType.TalerPay: + return makeExtensionUrlWithParams("static/wallet.html#/pay", { + talerPayUri: talerUri, + }); + case TalerUriType.TalerTip: + return makeExtensionUrlWithParams("static/wallet.html#/tip", { + talerTipUri: talerUri, + }); + case TalerUriType.TalerRefund: + return makeExtensionUrlWithParams("static/wallet.html#/refund", { + talerRefundUri: talerUri, + }); + case TalerUriType.TalerNotifyReserve: + // FIXME: implement + break; + default: + console.warn( + "Response with HTTP 402 has Taler header, but header value is not a taler:// URI.", + ); + break; + } + return undefined; +} + +function makeExtensionUrlWithParams( + url: string, + params?: { [name: string]: string | undefined }, +): string { + const innerUrl = new URL(chrome.extension.getURL("/" + url)); + if (params) { + for (const key in params) { + const p = params[key]; + if (p) { + innerUrl.searchParams.set(key, p); + } + } + } + return innerUrl.href; +} + +async function findTalerUriInActiveTab(): Promise<string | undefined> { + return new Promise((resolve, reject) => { + chrome.tabs.executeScript( + { + code: ` + (() => { + let x = document.querySelector("a[href^='taler://'") || document.querySelector("a[href^='taler+http://'"); + return x ? x.href.toString() : null; + })(); + `, + allFrames: false, + }, + (result) => { + if (chrome.runtime.lastError) { + console.error(chrome.runtime.lastError); + resolve(undefined); + return; + } + console.log("got result", result); + resolve(result[0]); + }, + ); + }); +} diff --git a/packages/taler-wallet-webextension/src/popup/Balance.tsx b/packages/taler-wallet-webextension/src/popup/Balance.tsx new file mode 100644 index 000000000..77d2c4201 --- /dev/null +++ b/packages/taler-wallet-webextension/src/popup/Balance.tsx @@ -0,0 +1,173 @@ +/* + 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/> + */ + +import { + Amounts, + BalancesResponse, + Balance, i18n, AmountJson, amountFractionalBase +} from "@gnu-taler/taler-util"; +import { Component, JSX } from "preact"; +import { PageLink, renderAmount } from "../renderHtml"; +import * as wxApi from "../wxApi"; + + +/** + * Render an amount as a large number with a small currency symbol. + */ +function bigAmount(amount: AmountJson): JSX.Element { + const v = amount.value + amount.fraction / amountFractionalBase; + return ( + <span> + <span style={{ fontSize: "5em", display: "block" }}>{v}</span>{" "} + <span>{amount.currency}</span> + </span> + ); +} + +function EmptyBalanceView(): JSX.Element { + return ( + <p><i18n.Translate> + You have no balance to show. Need some{" "} + <PageLink pageName="/welcome">help</PageLink> getting started? + </i18n.Translate></p> + ); +} + + +export class BalancePage extends Component<any, any> { + private balance?: BalancesResponse; + private gotError = false; + private canceler: (() => void) | undefined = undefined; + private unmount = false; + private updateBalanceRunning = false; + + componentWillMount(): void { + this.canceler = wxApi.onUpdateNotification(() => this.updateBalance()); + this.updateBalance(); + } + + componentWillUnmount(): void { + console.log("component WalletBalanceView will unmount"); + if (this.canceler) { + this.canceler(); + } + this.unmount = true; + } + + async updateBalance(): Promise<void> { + if (this.updateBalanceRunning) { + return; + } + this.updateBalanceRunning = true; + let balance: BalancesResponse; + try { + balance = await wxApi.getBalance(); + } catch (e) { + if (this.unmount) { + return; + } + this.gotError = true; + console.error("could not retrieve balances", e); + this.setState({}); + return; + } finally { + this.updateBalanceRunning = false; + } + if (this.unmount) { + return; + } + this.gotError = false; + console.log("got balance", balance); + this.balance = balance; + this.setState({}); + } + + formatPending(entry: Balance): JSX.Element { + let incoming: JSX.Element | undefined; + let payment: JSX.Element | undefined; + + const available = Amounts.parseOrThrow(entry.available); + const pendingIncoming = Amounts.parseOrThrow(entry.pendingIncoming); + const pendingOutgoing = Amounts.parseOrThrow(entry.pendingOutgoing); + + console.log( + "available: ", + entry.pendingIncoming ? renderAmount(entry.available) : null + ); + console.log( + "incoming: ", + entry.pendingIncoming ? renderAmount(entry.pendingIncoming) : null + ); + + if (!Amounts.isZero(pendingIncoming)) { + incoming = ( + <span><i18n.Translate> + <span style={{ color: "darkgreen" }}> + {"+"} + {renderAmount(entry.pendingIncoming)} + </span>{" "} + incoming + </i18n.Translate></span> + ); + } + + 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 ( + <div className="balance"> + <p>{i18n.str`Error: could not retrieve balance information.`}</p> + <p> + Click <PageLink pageName="welcome.html">here</PageLink> for help and + diagnostics. + </p> + </div> + ); + } + if (!wallet) { + return <span></span>; + } + + const listing = wallet.balances.map((entry) => { + const av = Amounts.parseOrThrow(entry.available); + return ( + <p key={av.currency}> + {bigAmount(av)} {this.formatPending(entry)} + </p> + ); + }); + return listing.length > 0 ? ( + <div className="balance">{listing}</div> + ) : ( + <EmptyBalanceView /> + ); + } +} diff --git a/packages/taler-wallet-webextension/src/popup/Debug.tsx b/packages/taler-wallet-webextension/src/popup/Debug.tsx new file mode 100644 index 000000000..073dac2ca --- /dev/null +++ b/packages/taler-wallet-webextension/src/popup/Debug.tsx @@ -0,0 +1,63 @@ +/* + 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/> + */ + +import { JSX } from "preact"; +import { Diagnostics } from "../components/Diagnostics"; +import * as wxApi from "../wxApi"; + + +export function DebugPage(props: any): JSX.Element { + return ( + <div> + <p>Debug tools:</p> + <button onClick={openExtensionPage("/static/popup.html")}>wallet tab</button> + <br /> + <button onClick={confirmReset}>reset</button> + <button onClick={reload}>reload chrome extension</button> + <Diagnostics /> + </div> + ); +} + +export function reload(): void { + try { + chrome.runtime.reload(); + window.close(); + } catch (e) { + // Functionality missing in firefox, ignore! + } +} + +export async function confirmReset(): Promise<void> { + if ( + confirm( + "Do you want to IRREVOCABLY DESTROY everything inside your" + + " wallet and LOSE ALL YOUR COINS?", + ) + ) { + await wxApi.resetDb(); + window.close(); + } +} + +export function openExtensionPage(page: string) { + return () => { + chrome.tabs.create({ + url: chrome.extension.getURL(page), + }); + }; +} + diff --git a/packages/taler-wallet-webextension/src/popup/History.tsx b/packages/taler-wallet-webextension/src/popup/History.tsx new file mode 100644 index 000000000..ffcec5e41 --- /dev/null +++ b/packages/taler-wallet-webextension/src/popup/History.tsx @@ -0,0 +1,227 @@ +/* + 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/> + */ + +import { AmountString, Timestamp, Transaction, TransactionsResponse, TransactionType } from "@gnu-taler/taler-util"; +import { JSX } from "preact"; +import { useEffect, useState } from "preact/hooks"; +import * as wxApi from "../wxApi"; +import { Pages } from "./popup"; + + +export function HistoryPage(props: any): JSX.Element { + const [transactions, setTransactions] = useState< + TransactionsResponse | undefined + >(undefined); + + useEffect(() => { + const fetchData = async (): Promise<void> => { + const res = await wxApi.getTransactions(); + setTransactions(res); + }; + fetchData(); + }, []); + + if (!transactions) { + return <div>Loading ...</div>; + } + + const txs = [...transactions.transactions].reverse(); + + return ( + <div> + {txs.map((tx, i) => ( + <TransactionItem key={i} tx={tx} /> + ))} + </div> + ); +} + +function TransactionItem(props: { tx: Transaction }): JSX.Element { + const tx = props.tx; + switch (tx.type) { + case TransactionType.Withdrawal: + return ( + <TransactionLayout + id={tx.transactionId} + amount={tx.amountEffective} + debitCreditIndicator={"credit"} + title="Withdrawal" + subtitle={`via ${tx.exchangeBaseUrl}`} + timestamp={tx.timestamp} + iconPath="/static/img/ri-bank-line.svg" + pending={tx.pending} + ></TransactionLayout> + ); + case TransactionType.Payment: + return ( + <TransactionLayout + id={tx.transactionId} + amount={tx.amountEffective} + debitCreditIndicator={"debit"} + title="Payment" + subtitle={tx.info.summary} + timestamp={tx.timestamp} + iconPath="/static/img/ri-shopping-cart-line.svg" + pending={tx.pending} + ></TransactionLayout> + ); + case TransactionType.Refund: + return ( + <TransactionLayout + id={tx.transactionId} + amount={tx.amountEffective} + debitCreditIndicator={"credit"} + title="Refund" + subtitle={tx.info.summary} + timestamp={tx.timestamp} + iconPath="/static/img/ri-refund-2-line.svg" + pending={tx.pending} + ></TransactionLayout> + ); + case TransactionType.Tip: + return ( + <TransactionLayout + id={tx.transactionId} + amount={tx.amountEffective} + debitCreditIndicator={"credit"} + title="Tip" + subtitle={`from ${new URL(tx.merchantBaseUrl).hostname}`} + timestamp={tx.timestamp} + iconPath="/static/img/ri-hand-heart-line.svg" + pending={tx.pending} + ></TransactionLayout> + ); + case TransactionType.Refresh: + return ( + <TransactionLayout + id={tx.transactionId} + amount={tx.amountEffective} + debitCreditIndicator={"credit"} + title="Refresh" + subtitle={`via exchange ${tx.exchangeBaseUrl}`} + timestamp={tx.timestamp} + iconPath="/static/img/ri-refresh-line.svg" + pending={tx.pending} + ></TransactionLayout> + ); + case TransactionType.Deposit: + return ( + <TransactionLayout + id={tx.transactionId} + amount={tx.amountEffective} + debitCreditIndicator={"debit"} + title="Refresh" + subtitle={`to ${tx.targetPaytoUri}`} + timestamp={tx.timestamp} + iconPath="/static/img/ri-refresh-line.svg" + pending={tx.pending} + ></TransactionLayout> + ); + } +} + +function TransactionLayout(props: TransactionLayoutProps): JSX.Element { + const date = new Date(props.timestamp.t_ms); + const dateStr = date.toLocaleString([], { + dateStyle: "medium", + timeStyle: "short", + } as any); + return ( + <div + style={{ + display: "flex", + flexDirection: "row", + border: "1px solid gray", + borderRadius: "0.5em", + margin: "0.5em 0", + justifyContent: "space-between", + padding: "0.5em", + }} + > + <img src={props.iconPath} /> + <div + style={{ display: "flex", flexDirection: "column", marginLeft: "1em" }} + > + <div style={{ fontSize: "small", color: "gray" }}>{dateStr}</div> + <div style={{ fontVariant: "small-caps", fontSize: "x-large" }}> + <a href={Pages.transaction.replace(':tid', props.id)}><span>{props.title}</span></a> + {props.pending ? ( + <span style={{ color: "darkblue" }}> (Pending)</span> + ) : null} + </div> + + <div>{props.subtitle}</div> + </div> + <TransactionAmount + pending={props.pending} + amount={props.amount} + debitCreditIndicator={props.debitCreditIndicator} + /> + </div> + ); +} + +interface TransactionLayoutProps { + debitCreditIndicator: "debit" | "credit" | "unknown"; + amount: AmountString | "unknown"; + timestamp: Timestamp; + title: string; + id: string; + subtitle: string; + iconPath: string; + pending: boolean; +} + +interface TransactionAmountProps { + debitCreditIndicator: "debit" | "credit" | "unknown"; + amount: AmountString | "unknown"; + pending: boolean; +} + +function TransactionAmount(props: TransactionAmountProps): JSX.Element { + const [currency, amount] = props.amount.split(":"); + let sign: string; + switch (props.debitCreditIndicator) { + case "credit": + sign = "+"; + break; + case "debit": + sign = "-"; + break; + case "unknown": + sign = ""; + } + const style: JSX.AllCSSProperties = { + marginLeft: "auto", + display: "flex", + flexDirection: "column", + alignItems: "center", + alignSelf: "center" + }; + if (props.pending) { + style.color = "gray"; + } + return ( + <div style={{ ...style }}> + <div style={{ fontSize: "x-large" }}> + {sign} + {amount} + </div> + <div>{currency}</div> + </div> + ); +} + diff --git a/packages/taler-wallet-webextension/src/popup/Settings.tsx b/packages/taler-wallet-webextension/src/popup/Settings.tsx new file mode 100644 index 000000000..5028b597c --- /dev/null +++ b/packages/taler-wallet-webextension/src/popup/Settings.tsx @@ -0,0 +1,34 @@ +/* + 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/> +*/ + + +import { PermissionsCheckbox } from "../components/PermissionsCheckbox"; +import { useExtendedPermissions } from "../hooks/useExtendedPermissions"; + + +export function SettingsPage() { + const [permissionsEnabled, togglePermissions] = useExtendedPermissions(); + return ( + <div> + <h2>Permissions</h2> + <PermissionsCheckbox enabled={permissionsEnabled} onToggle={togglePermissions} /> + {/* + <h2>Developer mode</h2> + <DebugCheckbox enabled={permissionsEnabled} onToggle={togglePermissions} /> + */} + </div> + ); +} diff --git a/packages/taler-wallet-webextension/src/popup/popup.stories.tsx b/packages/taler-wallet-webextension/src/popup/Transaction.stories.tsx index 0cb51a336..3df2687fd 100644 --- a/packages/taler-wallet-webextension/src/popup/popup.stories.tsx +++ b/packages/taler-wallet-webextension/src/popup/Transaction.stories.tsx @@ -26,11 +26,12 @@ import { TransactionWithdrawal, WithdrawalType } from '@gnu-taler/taler-util'; -import { WalletTransactionView as Component } from './popup'; +import { FunctionalComponent } from 'preact'; +import { TransactionView as TestedComponent } from './Transaction'; export default { - title: 'popup/transaction details', - component: Component, + title: 'popup/transaction/details', + component: TestedComponent, decorators: [ (Story: any) => <div> <link key="1" rel="stylesheet" type="text/css" href="/style/pure.css" /> @@ -114,32 +115,32 @@ const exampleData = { } as TransactionRefund, } -function dynamic<T>(props: any) { +function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) { const r = (args: any) => <Component {...args} /> r.args = props return r } -export const NotYetLoaded = dynamic({}); +export const NotYetLoaded = createExample(TestedComponent,{}); -export const Withdraw = dynamic({ +export const Withdraw = createExample(TestedComponent,{ transaction: exampleData.withdraw }); -export const WithdrawPending = dynamic({ +export const WithdrawPending = createExample(TestedComponent,{ transaction: { ...exampleData.withdraw, pending: true }, }); -export const Payment = dynamic({ +export const Payment = createExample(TestedComponent,{ transaction: exampleData.payment }); -export const PaymentPending = dynamic({ +export const PaymentPending = createExample(TestedComponent,{ transaction: { ...exampleData.payment, pending: true }, }); -export const PaymentWithProducts = dynamic({ +export const PaymentWithProducts = createExample(TestedComponent,{ transaction: { ...exampleData.payment, info: { @@ -154,35 +155,35 @@ export const PaymentWithProducts = dynamic({ }); -export const Deposit = dynamic({ +export const Deposit = createExample(TestedComponent,{ transaction: exampleData.deposit }); -export const DepositPending = dynamic({ +export const DepositPending = createExample(TestedComponent,{ transaction: { ...exampleData.deposit, pending: true } }); -export const Refresh = dynamic({ +export const Refresh = createExample(TestedComponent,{ transaction: exampleData.refresh }); -export const Tip = dynamic({ +export const Tip = createExample(TestedComponent,{ transaction: exampleData.tip }); -export const TipPending = dynamic({ +export const TipPending = createExample(TestedComponent,{ transaction: { ...exampleData.tip, pending: true } }); -export const Refund = dynamic({ +export const Refund = createExample(TestedComponent,{ transaction: exampleData.refund }); -export const RefundPending = dynamic({ +export const RefundPending = createExample(TestedComponent,{ transaction: { ...exampleData.refund, pending: true } }); -export const RefundWithProducts = dynamic({ +export const RefundWithProducts = createExample(TestedComponent,{ transaction: { ...exampleData.refund, info: { diff --git a/packages/taler-wallet-webextension/src/popup/Transaction.tsx b/packages/taler-wallet-webextension/src/popup/Transaction.tsx new file mode 100644 index 000000000..b1179228e --- /dev/null +++ b/packages/taler-wallet-webextension/src/popup/Transaction.tsx @@ -0,0 +1,327 @@ +/* + 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/> + */ + +import { Amounts, i18n, Transaction, TransactionType } from "@gnu-taler/taler-util"; +import { format } from "date-fns"; +import { JSX } from "preact"; +import { route } from 'preact-router'; +import { useEffect, useState } from "preact/hooks"; +import * as wxApi from "../wxApi"; +import { Pages } from "./popup"; + + +export function TransactionPage({ tid }: { tid: string; }): JSX.Element { + const [transaction, setTransaction] = useState< + Transaction | undefined + >(undefined); + + useEffect(() => { + const fetchData = async (): Promise<void> => { + const res = await wxApi.getTransactions(); + const ts = res.transactions.filter(t => t.transactionId === tid); + if (ts.length === 1) { + setTransaction(ts[0]); + } else { + route(Pages.history); + } + }; + fetchData(); + }, []); + + return <TransactionView + transaction={transaction} + onDelete={() => wxApi.deleteTransaction(tid).then(_ => history.go(-1))} + onBack={() => { history.go(-1); }} />; +} + +export interface WalletTransactionProps { + transaction?: Transaction, + onDelete: () => void, + onBack: () => void, +} + +export function TransactionView({ transaction, onDelete, onBack }: WalletTransactionProps) { + if (!transaction) { + return <div><i18n.Translate>Loading ...</i18n.Translate></div>; + } + + function Footer() { + return <footer style={{ marginTop: 'auto', display: 'flex' }}> + <button onClick={onBack}><i18n.Translate>back</i18n.Translate></button> + <div style={{ width: '100%', flexDirection: 'row', justifyContent: 'flex-end', display: 'flex' }}> + <button onClick={onDelete}><i18n.Translate>remove</i18n.Translate></button> + + </div> + + </footer> + } + + function Pending() { + if (!transaction?.pending) return null + return <span style={{ fontWeight: 'normal', fontSize: 16, color: 'gray' }}>(pending...)</span> + } + + if (transaction.type === TransactionType.Withdrawal) { + return ( + <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: '20rem' }} > + <section> + <h1>Withdrawal <Pending /></h1> + <p> + From <b>{transaction.exchangeBaseUrl}</b> + </p> + <table class={transaction.pending ? "detailsTable pending" : "detailsTable"}> + <tr> + <td>Amount subtracted</td> + <td>{transaction.amountRaw}</td> + </tr> + <tr> + <td>Amount received</td> + <td>{transaction.amountEffective}</td> + </tr> + <tr> + <td>Exchange fee</td> + <td>{Amounts.stringify( + Amounts.sub( + Amounts.parseOrThrow(transaction.amountRaw), + Amounts.parseOrThrow(transaction.amountEffective), + ).amount + )}</td> + </tr> + <tr> + <td>When</td> + <td>{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</td> + </tr> + </table> + </section> + <Footer /> + </div> + ); + } + + if (transaction.type === TransactionType.Payment) { + return ( + <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: '20rem' }} > + <section> + <h1>Payment ({transaction.proposalId.substring(0, 10)}...) <Pending /></h1> + <p> + To <b>{transaction.info.merchant.name}</b> + </p> + <table class={transaction.pending ? "detailsTable pending" : "detailsTable"}> + <tr> + <td>Order id</td> + <td>{transaction.info.orderId}</td> + </tr> + <tr> + <td>Summary</td> + <td>{transaction.info.summary}</td> + </tr> + {transaction.info.products && transaction.info.products.length > 0 && + <tr> + <td>Products</td> + <td><ol style={{ margin: 0, textAlign: 'left' }}> + {transaction.info.products.map(p => + <li>{p.description}</li> + )}</ol></td> + </tr> + } + <tr> + <td>Order amount</td> + <td>{transaction.amountRaw}</td> + </tr> + <tr> + <td>Order amount and fees</td> + <td>{transaction.amountEffective}</td> + </tr> + <tr> + <td>Exchange fee</td> + <td>{Amounts.stringify( + Amounts.sub( + Amounts.parseOrThrow(transaction.amountEffective), + Amounts.parseOrThrow(transaction.amountRaw), + ).amount + )}</td> + </tr> + <tr> + <td>When</td> + <td>{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</td> + </tr> + </table> + </section> + <Footer /> + </div> + ); + } + + if (transaction.type === TransactionType.Deposit) { + return ( + <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: '20rem' }} > + <section> + <h1>Deposit ({transaction.depositGroupId}) <Pending /></h1> + <p> + To <b>{transaction.targetPaytoUri}</b> + </p> + <table class={transaction.pending ? "detailsTable pending" : "detailsTable"}> + <tr> + <td>Amount deposit</td> + <td>{transaction.amountRaw}</td> + </tr> + <tr> + <td>Amount deposit and fees</td> + <td>{transaction.amountEffective}</td> + </tr> + <tr> + <td>Exchange fee</td> + <td>{Amounts.stringify( + Amounts.sub( + Amounts.parseOrThrow(transaction.amountEffective), + Amounts.parseOrThrow(transaction.amountRaw), + ).amount + )}</td> + </tr> + <tr> + <td>When</td> + <td>{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</td> + </tr> + </table> + </section> + <Footer /> + </div> + ); + } + + if (transaction.type === TransactionType.Refresh) { + return ( + <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: '20rem' }} > + <section> + <h1>Refresh <Pending /></h1> + <p> + From <b>{transaction.exchangeBaseUrl}</b> + </p> + <table class={transaction.pending ? "detailsTable pending" : "detailsTable"}> + <tr> + <td>Amount refreshed</td> + <td>{transaction.amountRaw}</td> + </tr> + <tr> + <td>Fees</td> + <td>{transaction.amountEffective}</td> + </tr> + <tr> + <td>When</td> + <td>{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</td> + </tr> + </table> + </section> + <Footer /> + </div> + ); + } + + if (transaction.type === TransactionType.Tip) { + return ( + <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: '20rem' }} > + <section> + <h1>Tip <Pending /></h1> + <p> + From <b>{transaction.merchantBaseUrl}</b> + </p> + <table class={transaction.pending ? "detailsTable pending" : "detailsTable"}> + <tr> + <td>Amount deduce</td> + <td>{transaction.amountRaw}</td> + </tr> + <tr> + <td>Amount received</td> + <td>{transaction.amountEffective}</td> + </tr> + <tr> + <td>Exchange fee</td> + <td>{Amounts.stringify( + Amounts.sub( + Amounts.parseOrThrow(transaction.amountRaw), + Amounts.parseOrThrow(transaction.amountEffective), + ).amount + )}</td> + </tr> + <tr> + <td>When</td> + <td>{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</td> + </tr> + </table> + </section> + <Footer /> + </div> + ); + } + + const TRANSACTION_FROM_REFUND = /[a-z]*:([\w]{10}).*/ + if (transaction.type === TransactionType.Refund) { + return ( + <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: '20rem' }} > + <section> + <h1>Refund ({TRANSACTION_FROM_REFUND.exec(transaction.refundedTransactionId)![1]}...) <Pending /></h1> + <p> + From <b>{transaction.info.merchant.name}</b> + </p> + <table class={transaction.pending ? "detailsTable pending" : "detailsTable"}> + <tr> + <td>Order id</td> + <td>{transaction.info.orderId}</td> + </tr> + <tr> + <td>Summary</td> + <td>{transaction.info.summary}</td> + </tr> + {transaction.info.products && transaction.info.products.length > 0 && + <tr> + <td>Products</td> + <td><ol> + {transaction.info.products.map(p => + <li>{p.description}</li> + )}</ol></td> + </tr> + } + <tr> + <td>Amount deduce</td> + <td>{transaction.amountRaw}</td> + </tr> + <tr> + <td>Amount received</td> + <td>{transaction.amountEffective}</td> + </tr> + <tr> + <td>Exchange fee</td> + <td>{Amounts.stringify( + Amounts.sub( + Amounts.parseOrThrow(transaction.amountRaw), + Amounts.parseOrThrow(transaction.amountEffective), + ).amount + )}</td> + </tr> + <tr> + <td>When</td> + <td>{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</td> + </tr> + </table> + </section> + <Footer /> + </div> + ); + } + + + return <div></div> +} diff --git a/packages/taler-wallet-webextension/src/popup/popup.tsx b/packages/taler-wallet-webextension/src/popup/popup.tsx index 0f76d7728..95b87fad0 100644 --- a/packages/taler-wallet-webextension/src/popup/popup.tsx +++ b/packages/taler-wallet-webextension/src/popup/popup.tsx @@ -25,29 +25,9 @@ * Imports. */ import { - AmountJson, - Amounts, - BalancesResponse, - Balance, - classifyTalerUri, - TalerUriType, - TransactionsResponse, - Transaction, - TransactionType, - AmountString, - Timestamp, - amountFractionalBase, - i18n, + classifyTalerUri, i18n, TalerUriType } from "@gnu-taler/taler-util"; -import { format } from "date-fns"; -import { Component, ComponentChildren, Fragment, JSX } from "preact"; -import { route } from 'preact-router'; -import { useEffect, useState } from "preact/hooks"; -import { Diagnostics } from "../components/Diagnostics"; -import { PermissionsCheckbox } from "../components/PermissionsCheckbox"; -import { useExtendedPermissions } from "../hooks/useExtendedPermissions"; -import { PageLink, renderAmount } from "../renderHtml"; -import * as wxApi from "../wxApi"; +import { ComponentChildren, JSX } from "preact"; export enum Pages { balance = '/balance', @@ -86,878 +66,3 @@ export function WalletNavBar({ current }: { current?: string }) { ); } -/** - * Render an amount as a large number with a small currency symbol. - */ -function bigAmount(amount: AmountJson): JSX.Element { - const v = amount.value + amount.fraction / amountFractionalBase; - return ( - <span> - <span style={{ fontSize: "5em", display: "block" }}>{v}</span>{" "} - <span>{amount.currency}</span> - </span> - ); -} - -function EmptyBalanceView(): JSX.Element { - return ( - <p><i18n.Translate> - You have no balance to show. Need some{" "} - <PageLink pageName="/welcome">help</PageLink> getting started? - </i18n.Translate></p> - ); -} - -export class WalletBalanceView extends Component<any, any> { - private balance?: BalancesResponse; - private gotError = false; - private canceler: (() => void) | undefined = undefined; - private unmount = false; - private updateBalanceRunning = false; - - componentWillMount(): void { - this.canceler = wxApi.onUpdateNotification(() => this.updateBalance()); - this.updateBalance(); - } - - componentWillUnmount(): void { - console.log("component WalletBalanceView will unmount"); - if (this.canceler) { - this.canceler(); - } - this.unmount = true; - } - - async updateBalance(): Promise<void> { - if (this.updateBalanceRunning) { - return; - } - this.updateBalanceRunning = true; - let balance: BalancesResponse; - try { - balance = await wxApi.getBalance(); - } catch (e) { - if (this.unmount) { - return; - } - this.gotError = true; - console.error("could not retrieve balances", e); - this.setState({}); - return; - } finally { - this.updateBalanceRunning = false; - } - if (this.unmount) { - return; - } - this.gotError = false; - console.log("got balance", balance); - this.balance = balance; - this.setState({}); - } - - formatPending(entry: Balance): JSX.Element { - let incoming: JSX.Element | undefined; - let payment: JSX.Element | undefined; - - const available = Amounts.parseOrThrow(entry.available); - const pendingIncoming = Amounts.parseOrThrow(entry.pendingIncoming); - const pendingOutgoing = Amounts.parseOrThrow(entry.pendingOutgoing); - - console.log( - "available: ", - entry.pendingIncoming ? renderAmount(entry.available) : null, - ); - console.log( - "incoming: ", - entry.pendingIncoming ? renderAmount(entry.pendingIncoming) : null, - ); - - if (!Amounts.isZero(pendingIncoming)) { - incoming = ( - <span><i18n.Translate> - <span style={{ color: "darkgreen" }}> - {"+"} - {renderAmount(entry.pendingIncoming)} - </span>{" "} - incoming - </i18n.Translate></span> - ); - } - - 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 ( - <div className="balance"> - <p>{i18n.str`Error: could not retrieve balance information.`}</p> - <p> - Click <PageLink pageName="welcome.html">here</PageLink> for help and - diagnostics. - </p> - </div> - ); - } - if (!wallet) { - return <span></span>; - } - console.log(wallet); - const listing = wallet.balances.map((entry) => { - const av = Amounts.parseOrThrow(entry.available); - return ( - <p key={av.currency}> - {bigAmount(av)} {this.formatPending(entry)} - </p> - ); - }); - return listing.length > 0 ? ( - <div className="balance">{listing}</div> - ) : ( - <EmptyBalanceView /> - ); - } -} - -interface TransactionAmountProps { - debitCreditIndicator: "debit" | "credit" | "unknown"; - amount: AmountString | "unknown"; - pending: boolean; -} - -function TransactionAmount(props: TransactionAmountProps): JSX.Element { - const [currency, amount] = props.amount.split(":"); - let sign: string; - switch (props.debitCreditIndicator) { - case "credit": - sign = "+"; - break; - case "debit": - sign = "-"; - break; - case "unknown": - sign = ""; - } - const style: JSX.AllCSSProperties = { - marginLeft: "auto", - display: "flex", - flexDirection: "column", - alignItems: "center", - alignSelf: "center" - }; - if (props.pending) { - style.color = "gray"; - } - return ( - <div style={{ ...style }}> - <div style={{ fontSize: "x-large" }}> - {sign} - {amount} - </div> - <div>{currency}</div> - </div> - ); -} - -interface TransactionLayoutProps { - debitCreditIndicator: "debit" | "credit" | "unknown"; - amount: AmountString | "unknown"; - timestamp: Timestamp; - title: string; - id: string; - subtitle: string; - iconPath: string; - pending: boolean; -} - -function TransactionLayout(props: TransactionLayoutProps): JSX.Element { - const date = new Date(props.timestamp.t_ms); - const dateStr = date.toLocaleString([], { - dateStyle: "medium", - timeStyle: "short", - } as any); - return ( - <div - style={{ - display: "flex", - flexDirection: "row", - border: "1px solid gray", - borderRadius: "0.5em", - margin: "0.5em 0", - justifyContent: "space-between", - padding: "0.5em", - }} - > - <img src={props.iconPath} /> - <div - style={{ display: "flex", flexDirection: "column", marginLeft: "1em" }} - > - <div style={{ fontSize: "small", color: "gray" }}>{dateStr}</div> - <div style={{ fontVariant: "small-caps", fontSize: "x-large" }}> - <a href={Pages.transaction.replace(':tid', props.id)}><span>{props.title}</span></a> - {props.pending ? ( - <span style={{ color: "darkblue" }}> (Pending)</span> - ) : null} - </div> - - <div>{props.subtitle}</div> - </div> - <TransactionAmount - pending={props.pending} - amount={props.amount} - debitCreditIndicator={props.debitCreditIndicator} - /> - </div> - ); -} - -function TransactionItem(props: { tx: Transaction }): JSX.Element { - const tx = props.tx; - switch (tx.type) { - case TransactionType.Withdrawal: - return ( - <TransactionLayout - id={tx.transactionId} - amount={tx.amountEffective} - debitCreditIndicator={"credit"} - title="Withdrawal" - subtitle={`via ${tx.exchangeBaseUrl}`} - timestamp={tx.timestamp} - iconPath="/static/img/ri-bank-line.svg" - pending={tx.pending} - ></TransactionLayout> - ); - case TransactionType.Payment: - return ( - <TransactionLayout - id={tx.transactionId} - amount={tx.amountEffective} - debitCreditIndicator={"debit"} - title="Payment" - subtitle={tx.info.summary} - timestamp={tx.timestamp} - iconPath="/static/img/ri-shopping-cart-line.svg" - pending={tx.pending} - ></TransactionLayout> - ); - case TransactionType.Refund: - return ( - <TransactionLayout - id={tx.transactionId} - amount={tx.amountEffective} - debitCreditIndicator={"credit"} - title="Refund" - subtitle={tx.info.summary} - timestamp={tx.timestamp} - iconPath="/static/img/ri-refund-2-line.svg" - pending={tx.pending} - ></TransactionLayout> - ); - case TransactionType.Tip: - return ( - <TransactionLayout - id={tx.transactionId} - amount={tx.amountEffective} - debitCreditIndicator={"credit"} - title="Tip" - subtitle={`from ${new URL(tx.merchantBaseUrl).hostname}`} - timestamp={tx.timestamp} - iconPath="/static/img/ri-hand-heart-line.svg" - pending={tx.pending} - ></TransactionLayout> - ); - case TransactionType.Refresh: - return ( - <TransactionLayout - id={tx.transactionId} - amount={tx.amountEffective} - debitCreditIndicator={"credit"} - title="Refresh" - subtitle={`via exchange ${tx.exchangeBaseUrl}`} - timestamp={tx.timestamp} - iconPath="/static/img/ri-refresh-line.svg" - pending={tx.pending} - ></TransactionLayout> - ); - case TransactionType.Deposit: - return ( - <TransactionLayout - id={tx.transactionId} - amount={tx.amountEffective} - debitCreditIndicator={"debit"} - title="Refresh" - subtitle={`to ${tx.targetPaytoUri}`} - timestamp={tx.timestamp} - iconPath="/static/img/ri-refresh-line.svg" - pending={tx.pending} - ></TransactionLayout> - ); - } -} - -export function WalletHistory(props: any): JSX.Element { - const [transactions, setTransactions] = useState< - TransactionsResponse | undefined - >(undefined); - - useEffect(() => { - const fetchData = async (): Promise<void> => { - const res = await wxApi.getTransactions(); - setTransactions(res); - }; - fetchData(); - }, []); - - if (!transactions) { - return <div>Loading ...</div>; - } - - const txs = [...transactions.transactions].reverse(); - - return ( - <div> - {txs.map((tx, i) => ( - <TransactionItem key={i} tx={tx} /> - ))} - </div> - ); -} - -interface WalletTransactionProps { - transaction?: Transaction, - onDelete: () => void, - onBack: () => void, -} - -export function WalletTransactionView({ transaction, onDelete, onBack }: WalletTransactionProps) { - if (!transaction) { - return <div><i18n.Translate>Loading ...</i18n.Translate></div>; - } - - function Footer() { - return <footer style={{ marginTop: 'auto', display: 'flex' }}> - <button onClick={onBack}><i18n.Translate>back</i18n.Translate></button> - <div style={{ width: '100%', flexDirection: 'row', justifyContent: 'flex-end', display: 'flex' }}> - <button onClick={onDelete}><i18n.Translate>remove</i18n.Translate></button> - - </div> - - </footer> - } - - function Pending() { - if (!transaction?.pending) return null - return <span style={{ fontWeight: 'normal', fontSize: 16, color: 'gray' }}>(pending...)</span> - } - - if (transaction.type === TransactionType.Withdrawal) { - return ( - <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: '20rem' }} > - <section> - <h1>Withdrawal <Pending /></h1> - <p> - From <b>{transaction.exchangeBaseUrl}</b> - </p> - <table class={transaction.pending ? "detailsTable pending" : "detailsTable"}> - <tr> - <td>Amount subtracted</td> - <td>{transaction.amountRaw}</td> - </tr> - <tr> - <td>Amount received</td> - <td>{transaction.amountEffective}</td> - </tr> - <tr> - <td>Exchange fee</td> - <td>{Amounts.stringify( - Amounts.sub( - Amounts.parseOrThrow(transaction.amountRaw), - Amounts.parseOrThrow(transaction.amountEffective), - ).amount - )}</td> - </tr> - <tr> - <td>When</td> - <td>{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</td> - </tr> - </table> - </section> - <Footer /> - </div> - ); - } - - if (transaction.type === TransactionType.Payment) { - return ( - <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: '20rem' }} > - <section> - <h1>Payment ({transaction.proposalId.substring(0, 10)}...) <Pending /></h1> - <p> - To <b>{transaction.info.merchant.name}</b> - </p> - <table class={transaction.pending ? "detailsTable pending" : "detailsTable"}> - <tr> - <td>Order id</td> - <td>{transaction.info.orderId}</td> - </tr> - <tr> - <td>Summary</td> - <td>{transaction.info.summary}</td> - </tr> - {transaction.info.products && transaction.info.products.length > 0 && - <tr> - <td>Products</td> - <td><ol style={{ margin: 0, textAlign: 'left' }}> - {transaction.info.products.map(p => - <li>{p.description}</li> - )}</ol></td> - </tr> - } - <tr> - <td>Order amount</td> - <td>{transaction.amountRaw}</td> - </tr> - <tr> - <td>Order amount and fees</td> - <td>{transaction.amountEffective}</td> - </tr> - <tr> - <td>Exchange fee</td> - <td>{Amounts.stringify( - Amounts.sub( - Amounts.parseOrThrow(transaction.amountEffective), - Amounts.parseOrThrow(transaction.amountRaw), - ).amount - )}</td> - </tr> - <tr> - <td>When</td> - <td>{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</td> - </tr> - </table> - </section> - <Footer /> - </div> - ); - } - - if (transaction.type === TransactionType.Deposit) { - return ( - <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: '20rem' }} > - <section> - <h1>Deposit ({transaction.depositGroupId}) <Pending /></h1> - <p> - To <b>{transaction.targetPaytoUri}</b> - </p> - <table class={transaction.pending ? "detailsTable pending" : "detailsTable"}> - <tr> - <td>Amount deposit</td> - <td>{transaction.amountRaw}</td> - </tr> - <tr> - <td>Amount deposit and fees</td> - <td>{transaction.amountEffective}</td> - </tr> - <tr> - <td>Exchange fee</td> - <td>{Amounts.stringify( - Amounts.sub( - Amounts.parseOrThrow(transaction.amountEffective), - Amounts.parseOrThrow(transaction.amountRaw), - ).amount - )}</td> - </tr> - <tr> - <td>When</td> - <td>{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</td> - </tr> - </table> - </section> - <Footer /> - </div> - ); - } - - if (transaction.type === TransactionType.Refresh) { - return ( - <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: '20rem' }} > - <section> - <h1>Refresh <Pending /></h1> - <p> - From <b>{transaction.exchangeBaseUrl}</b> - </p> - <table class={transaction.pending ? "detailsTable pending" : "detailsTable"}> - <tr> - <td>Amount refreshed</td> - <td>{transaction.amountRaw}</td> - </tr> - <tr> - <td>Fees</td> - <td>{transaction.amountEffective}</td> - </tr> - <tr> - <td>When</td> - <td>{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</td> - </tr> - </table> - </section> - <Footer /> - </div> - ); - } - - if (transaction.type === TransactionType.Tip) { - return ( - <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: '20rem' }} > - <section> - <h1>Tip <Pending /></h1> - <p> - From <b>{transaction.merchantBaseUrl}</b> - </p> - <table class={transaction.pending ? "detailsTable pending" : "detailsTable"}> - <tr> - <td>Amount deduce</td> - <td>{transaction.amountRaw}</td> - </tr> - <tr> - <td>Amount received</td> - <td>{transaction.amountEffective}</td> - </tr> - <tr> - <td>Exchange fee</td> - <td>{Amounts.stringify( - Amounts.sub( - Amounts.parseOrThrow(transaction.amountRaw), - Amounts.parseOrThrow(transaction.amountEffective), - ).amount - )}</td> - </tr> - <tr> - <td>When</td> - <td>{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</td> - </tr> - </table> - </section> - <Footer /> - </div> - ); - } - - const TRANSACTION_FROM_REFUND = /[a-z]*:([\w]{10}).*/ - if (transaction.type === TransactionType.Refund) { - return ( - <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: '20rem' }} > - <section> - <h1>Refund ({TRANSACTION_FROM_REFUND.exec(transaction.refundedTransactionId)![1]}...) <Pending /></h1> - <p> - From <b>{transaction.info.merchant.name}</b> - </p> - <table class={transaction.pending ? "detailsTable pending" : "detailsTable"}> - <tr> - <td>Order id</td> - <td>{transaction.info.orderId}</td> - </tr> - <tr> - <td>Summary</td> - <td>{transaction.info.summary}</td> - </tr> - {transaction.info.products && transaction.info.products.length > 0 && - <tr> - <td>Products</td> - <td><ol> - {transaction.info.products.map(p => - <li>{p.description}</li> - )}</ol></td> - </tr> - } - <tr> - <td>Amount deduce</td> - <td>{transaction.amountRaw}</td> - </tr> - <tr> - <td>Amount received</td> - <td>{transaction.amountEffective}</td> - </tr> - <tr> - <td>Exchange fee</td> - <td>{Amounts.stringify( - Amounts.sub( - Amounts.parseOrThrow(transaction.amountRaw), - Amounts.parseOrThrow(transaction.amountEffective), - ).amount - )}</td> - </tr> - <tr> - <td>When</td> - <td>{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</td> - </tr> - </table> - </section> - <Footer /> - </div> - ); - } - - - return <div></div> -} - -export function WalletTransaction({ tid }: { tid: string }): JSX.Element { - const [transaction, setTransaction] = useState< - Transaction | undefined - >(undefined); - - useEffect(() => { - const fetchData = async (): Promise<void> => { - const res = await wxApi.getTransactions(); - const ts = res.transactions.filter(t => t.transactionId === tid) - if (ts.length === 1) { - setTransaction(ts[0]); - } else { - route(Pages.history) - } - }; - fetchData(); - }, []); - - return <WalletTransactionView - transaction={transaction} - onDelete={() => wxApi.deleteTransaction(tid).then(_ => history.go(-1))} - onBack={() => { history.go(-1) }} - /> -} - -export function WalletSettings() { - const [permissionsEnabled, togglePermissions] = useExtendedPermissions() - return ( - <div> - <h2>Permissions</h2> - <PermissionsCheckbox enabled={permissionsEnabled} onToggle={togglePermissions} /> - {/* - <h2>Developer mode</h2> - <DebugCheckbox enabled={permissionsEnabled} onToggle={togglePermissions} /> - */} - </div> - ); -} - - -export function DebugCheckbox({ enabled, onToggle }: { enabled: boolean, onToggle: () => void }): JSX.Element { - return ( - <div> - <input - checked={enabled} - onClick={onToggle} - type="checkbox" - id="checkbox-perm" - style={{ width: "1.5em", height: "1.5em", verticalAlign: "middle" }} - /> - <label - htmlFor="checkbox-perm" - style={{ marginLeft: "0.5em", fontWeight: "bold" }} - > - Automatically open wallet based on page content - </label> - <span - style={{ - color: "#383838", - fontSize: "smaller", - display: "block", - marginLeft: "2em", - }} - > - (Enabling this option below will make using the wallet faster, but - requires more permissions from your browser.) - </span> - </div> - ); -} - -function reload(): void { - try { - chrome.runtime.reload(); - window.close(); - } catch (e) { - // Functionality missing in firefox, ignore! - } -} - -async function confirmReset(): Promise<void> { - if ( - confirm( - "Do you want to IRREVOCABLY DESTROY everything inside your" + - " wallet and LOSE ALL YOUR COINS?", - ) - ) { - await wxApi.resetDb(); - window.close(); - } -} - -export function WalletDebug(props: any): JSX.Element { - return ( - <div> - <p>Debug tools:</p> - <button onClick={openExtensionPage("/static/popup.html")}>wallet tab</button> - <br /> - <button onClick={confirmReset}>reset</button> - <button onClick={reload}>reload chrome extension</button> - <Diagnostics /> - </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, -// }); -// }; -// } - -function makeExtensionUrlWithParams( - url: string, - params?: { [name: string]: string | undefined }, -): string { - const innerUrl = new URL(chrome.extension.getURL("/" + url)); - if (params) { - for (const key in params) { - const p = params[key]; - if (p) { - innerUrl.searchParams.set(key, p); - } - } - } - return innerUrl.href; -} - -export function actionForTalerUri(talerUri: string): string | undefined { - const uriType = classifyTalerUri(talerUri); - switch (uriType) { - case TalerUriType.TalerWithdraw: - return makeExtensionUrlWithParams("static/wallet.html#/withdraw", { - talerWithdrawUri: talerUri, - }); - case TalerUriType.TalerPay: - return makeExtensionUrlWithParams("static/wallet.html#/pay", { - talerPayUri: talerUri, - }); - case TalerUriType.TalerTip: - return makeExtensionUrlWithParams("static/wallet.html#/tip", { - talerTipUri: talerUri, - }); - case TalerUriType.TalerRefund: - return makeExtensionUrlWithParams("static/wallet.html#/refund", { - talerRefundUri: talerUri, - }); - case TalerUriType.TalerNotifyReserve: - // FIXME: implement - break; - default: - console.warn( - "Response with HTTP 402 has Taler header, but header value is not a taler:// URI.", - ); - break; - } - return undefined; -} - -export async function findTalerUriInActiveTab(): Promise<string | undefined> { - return new Promise((resolve, reject) => { - chrome.tabs.executeScript( - { - code: ` - (() => { - let x = document.querySelector("a[href^='taler://'") || document.querySelector("a[href^='taler+http://'"); - return x ? x.href.toString() : null; - })(); - `, - allFrames: false, - }, - (result) => { - if (chrome.runtime.lastError) { - console.error(chrome.runtime.lastError); - resolve(undefined); - return; - } - console.log("got result", result); - resolve(result[0]); - }, - ); - }); -} - -// export function WalletPopup(): JSX.Element { -// const [talerActionUrl, setTalerActionUrl] = useState<string | undefined>( -// undefined, -// ); -// const [dismissed, setDismissed] = useState(false); -// useEffect(() => { -// async function check(): Promise<void> { -// const talerUri = await findTalerUriInActiveTab(); -// if (talerUri) { -// const actionUrl = actionForTalerUri(talerUri); -// setTalerActionUrl(actionUrl); -// } -// } -// check(); -// }, []); -// if (talerActionUrl && !dismissed) { -// return ( -// <div style={{ padding: "1em", width: 400 }}> -// <h1>Taler Action</h1> -// <p>This page has a Taler action. </p> -// <p> -// <button -// onClick={() => { -// window.open(talerActionUrl, "_blank"); -// }} -// > -// Open -// </button> -// </p> -// <p> -// <button onClick={() => setDismissed(true)}>Dismiss</button> -// </p> -// </div> -// ); -// } -// return ( -// <div> -// <Match>{({ path }: any) => <WalletNavBar current={path} />}</Match> -// <div style={{ margin: "1em", width: 400 }}> -// <Router> -// <Route path={Pages.balance} component={WalletBalanceView} /> -// <Route path={Pages.settings} component={WalletSettings} /> -// <Route path={Pages.debug} component={WalletDebug} /> -// <Route path={Pages.history} component={WalletHistory} /> -// <Route path={Pages.transaction} component={WalletTransaction} /> -// </Router> -// </div> -// </div> -// ); -// } - diff --git a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx index 926ae7aa7..6cc781aa7 100644 --- a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx +++ b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx @@ -23,13 +23,17 @@ import { render } from "preact"; import { setupI18n } from "@gnu-taler/taler-util"; import { strings } from "./i18n/strings"; -import { useEffect, useState } from "preact/hooks"; +import { useEffect } from "preact/hooks"; import { - actionForTalerUri, findTalerUriInActiveTab, Pages, WalletBalanceView, WalletDebug, WalletHistory, - WalletNavBar, WalletSettings, WalletTransaction, WalletTransactionView -} from "./popup/popup"; + Pages, WalletNavBar} from "./popup/popup"; +import { HistoryPage } from "./popup/History"; +import { DebugPage } from "./popup/Debug"; +import { SettingsPage } from "./popup/Settings"; +import { TransactionPage } from "./popup/Transaction"; +import { BalancePage } from "./popup/Balance"; import Match from "preact-router/match"; import Router, { route, Route } from "preact-router"; +import { useTalerActionURL } from "./hooks/useTalerActionURL"; // import { Application } from "./Application"; function main(): void { @@ -53,25 +57,6 @@ if (document.readyState === "loading") { main(); } -function useTalerActionURL(): [string | undefined, (s: boolean) => void] { - const [talerActionUrl, setTalerActionUrl] = useState<string | undefined>( - undefined, - ); - const [dismissed, setDismissed] = useState(false); - useEffect(() => { - async function check(): Promise<void> { - const talerUri = await findTalerUriInActiveTab(); - if (talerUri) { - const actionUrl = actionForTalerUri(talerUri); - setTalerActionUrl(actionUrl); - } - } - check(); - }, []); - const url = dismissed ? undefined : talerActionUrl - return [url, setDismissed] -} - interface Props { url: string; onDismiss: (s: boolean) => void; @@ -105,11 +90,11 @@ function Application() { <Match>{({ path }: any) => <WalletNavBar current={path} />}</Match > <div style={{ margin: "1em", width: 400 }}> <Router> - <Route path={Pages.balance} component={WalletBalanceView} /> - <Route path={Pages.settings} component={WalletSettings} /> - <Route path={Pages.debug} component={WalletDebug} /> - <Route path={Pages.history} component={WalletHistory} /> - <Route path={Pages.transaction} component={WalletTransaction} /> + <Route path={Pages.balance} component={BalancePage} /> + <Route path={Pages.settings} component={SettingsPage} /> + <Route path={Pages.debug} component={DebugPage} /> + <Route path={Pages.history} component={HistoryPage} /> + <Route path={Pages.transaction} component={TransactionPage} /> <Route default component={Redirect} to={Pages.balance} /> </Router> </div> @@ -118,8 +103,6 @@ function Application() { } - - function Redirect({ to }: { to: string }): null { useEffect(() => { route(to, true) diff --git a/packages/taler-wallet-webextension/src/wallet/pay.tsx b/packages/taler-wallet-webextension/src/wallet/Pay.tsx index e958cd484..23b4e6c1a 100644 --- a/packages/taler-wallet-webextension/src/wallet/pay.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Pay.tsx @@ -45,7 +45,7 @@ interface Props { talerPayUri?: string } -export function TalerPayDialog({ talerPayUri }: Props): JSX.Element { +export function PayPage({ talerPayUri }: Props): JSX.Element { const [payStatus, setPayStatus] = useState<PreparePayResult | undefined>(undefined); const [payResult, setPayResult] = useState<ConfirmPayResult | undefined>(undefined); const [payErrMsg, setPayErrMsg] = useState<string | undefined>(""); @@ -222,14 +222,3 @@ export function TalerPayDialog({ talerPayUri }: Props): JSX.Element { ); } -/** - * @deprecated to be removed - */ -export function createPayPage(): JSX.Element { - const url = new URL(document.location.href); - const talerPayUri = url.searchParams.get("talerPayUri"); - if (!talerPayUri) { - throw Error("invalid parameter"); - } - return <TalerPayDialog talerPayUri={talerPayUri} />; -} diff --git a/packages/taler-wallet-webextension/src/wallet/refund.tsx b/packages/taler-wallet-webextension/src/wallet/Refund.tsx index 1991bc9d8..702217415 100644 --- a/packages/taler-wallet-webextension/src/wallet/refund.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Refund.tsx @@ -33,7 +33,7 @@ interface Props { talerRefundUri?: string } -export function RefundStatusView({ talerRefundUri }: Props): JSX.Element { +export function RefundPage({ talerRefundUri }: Props): JSX.Element { const [applyResult, setApplyResult] = useState<ApplyRefundResponse | undefined>(undefined); const [errMsg, setErrMsg] = useState<string | undefined>(undefined); @@ -87,22 +87,3 @@ export function RefundStatusView({ talerRefundUri }: Props): JSX.Element { </> ); } - -/** - * @deprecated to be removed - */ -export function createRefundPage(): JSX.Element { - const url = new URL(document.location.href); - - const container = document.getElementById("container"); - if (!container) { - throw Error("fatal: can't mount component, container missing"); - } - - const talerRefundUri = url.searchParams.get("talerRefundUri"); - if (!talerRefundUri) { - throw Error("taler refund URI required"); - } - - return <RefundStatusView talerRefundUri={talerRefundUri} />; -} diff --git a/packages/taler-wallet-webextension/src/wallet/tip.tsx b/packages/taler-wallet-webextension/src/wallet/Tip.tsx index d832976d8..708e8940b 100644 --- a/packages/taler-wallet-webextension/src/wallet/tip.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Tip.tsx @@ -30,7 +30,7 @@ interface Props { talerTipUri?: string } -export function TalerTipDialog({ talerTipUri }: Props): JSX.Element { +export function TipPage({ talerTipUri }: Props): JSX.Element { const [updateCounter, setUpdateCounter] = useState<number>(0); const [prepareTipResult, setPrepareTipResult] = useState< PrepareTipResult | undefined @@ -95,15 +95,3 @@ export function TalerTipDialog({ talerTipUri }: Props): JSX.Element { ); } } - -/** - * @deprecated to be removed - */ -export function createTipPage(): JSX.Element { - const url = new URL(document.location.href); - const talerTipUri = url.searchParams.get("talerTipUri"); - if (!talerTipUri) { - throw Error("invalid parameter"); - } - return <TalerTipDialog talerTipUri={talerTipUri} />; -} diff --git a/packages/taler-wallet-webextension/src/wallet/welcome.tsx b/packages/taler-wallet-webextension/src/wallet/Welcome.tsx index 9be62bf8b..0f9cc8677 100644 --- a/packages/taler-wallet-webextension/src/wallet/welcome.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Welcome.tsx @@ -20,43 +20,12 @@ * @author Florian Dold */ -import * as wxApi from "../wxApi"; -import { getPermissionsApi } from "../compat"; -import { extendedPermissions } from "../permissions"; -import { Fragment, JSX } from "preact/jsx-runtime"; +import { JSX } from "preact/jsx-runtime"; import { PermissionsCheckbox } from "../components/PermissionsCheckbox"; import { useExtendedPermissions } from "../hooks/useExtendedPermissions"; import { Diagnostics } from "../components/Diagnostics"; -export async function handleExtendedPerm(isEnabled: boolean): Promise<boolean> { - let nextVal: boolean | undefined; - - if (!isEnabled) { - const granted = await new Promise<boolean>((resolve, reject) => { - // We set permissions here, since apparently FF wants this to be done - // as the result of an input event ... - getPermissionsApi().request(extendedPermissions, (granted: boolean) => { - if (chrome.runtime.lastError) { - console.error("error requesting permissions"); - console.error(chrome.runtime.lastError); - reject(chrome.runtime.lastError); - return; - } - console.log("permissions granted:", granted); - resolve(granted); - }); - }); - const res = await wxApi.setExtendedPermissions(granted); - nextVal = res.newValue; - } else { - const res = await wxApi.setExtendedPermissions(false); - nextVal = res.newValue; - } - console.log("new permissions applied:", nextVal ?? false); - return nextVal ?? false -} - -export function Welcome(): JSX.Element { +export function WelcomePage(): JSX.Element { const [permissionsEnabled, togglePermissions] = useExtendedPermissions() return ( <> @@ -74,10 +43,3 @@ export function Welcome(): JSX.Element { </> ); } - -/** - * @deprecated to be removed - */ -export function createWelcomePage(): JSX.Element { - return <Welcome />; -} diff --git a/packages/taler-wallet-webextension/src/wallet/withdraw.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Withdraw.stories.tsx index 86f0eec90..24fb17dfa 100644 --- a/packages/taler-wallet-webextension/src/wallet/withdraw.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Withdraw.stories.tsx @@ -20,7 +20,7 @@ */ import { h } from 'preact'; -import { View, ViewProps } from './withdraw'; +import { View, ViewProps } from './Withdraw'; export default { diff --git a/packages/taler-wallet-webextension/src/wallet/withdraw.tsx b/packages/taler-wallet-webextension/src/wallet/Withdraw.tsx index cb96fa4df..5dc12407b 100644 --- a/packages/taler-wallet-webextension/src/wallet/withdraw.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Withdraw.tsx @@ -111,7 +111,7 @@ export function View({ talerWithdrawUri, details, cancelled, selectedExchange, a ) } -export function WithdrawalDialog({ talerWithdrawUri }: Props): JSX.Element { +export function WithdrawPage({ talerWithdrawUri }: Props): JSX.Element { const [details, setDetails] = useState<WithdrawUriInfoResponse | undefined>(undefined); const [selectedExchange, setSelectedExchange] = useState< string | undefined @@ -159,15 +159,3 @@ export function WithdrawalDialog({ talerWithdrawUri }: Props): JSX.Element { /> } - -/** - * @deprecated to be removed - */ -export function createWithdrawPage(): JSX.Element { - const url = new URL(document.location.href); - const talerWithdrawUri = url.searchParams.get("talerWithdrawUri"); - if (!talerWithdrawUri) { - throw Error("withdraw URI required"); - } - return <WithdrawalDialog talerWithdrawUri={talerWithdrawUri} />; -} diff --git a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx index 2d1671dd4..cb97ffbeb 100644 --- a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx +++ b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx @@ -25,11 +25,11 @@ import { setupI18n } from "@gnu-taler/taler-util"; import { strings } from "./i18n/strings"; import { createHashHistory } from 'history'; -import { WithdrawalDialog } from "./wallet/withdraw"; -import { Welcome } from "./wallet/welcome"; -import { TalerPayDialog } from "./wallet/pay"; -import { RefundStatusView } from "./wallet/refund"; -import { TalerTipDialog } from './wallet/tip'; +import { WithdrawPage } from "./wallet/Withdraw"; +import { WelcomePage } from "./wallet/Welcome"; +import { PayPage } from "./wallet/Pay"; +import { RefundPage } from "./wallet/Refund"; +import { TipPage } from './wallet/Tip'; import Router, { route, Route } from "preact-router"; @@ -82,7 +82,7 @@ function Application() { </div> <h1>Browser Extension Installed!</h1> <div> - <Welcome /> + <WelcomePage /> </div> </section> }} /> @@ -91,7 +91,7 @@ function Application() { return <section id="main"> <h1>GNU Taler Wallet</h1> <article class="fade"> - <TalerPayDialog talerPayUri={queryParams.talerPayUri} /> + <PayPage talerPayUri={queryParams.talerPayUri} /> </article> </section> }} /> @@ -100,7 +100,7 @@ function Application() { return <section id="main"> <h1>GNU Taler Wallet</h1> <article class="fade"> - <RefundStatusView talerRefundUri={queryParams.talerRefundUri} /> + <RefundPage talerRefundUri={queryParams.talerRefundUri} /> </article> </section> }} /> @@ -109,7 +109,7 @@ function Application() { return <section id="main"> <h1>GNU Taler Wallet</h1> <div> - <TalerTipDialog talerTipUri={queryParams.talerTipUri} /> + <TipPage talerTipUri={queryParams.talerTipUri} /> </div> </section> }} /> @@ -121,7 +121,7 @@ function Application() { </h1> </div> <div class="fade"> - <WithdrawalDialog talerWithdrawUri={queryParams.talerWithdrawUri} /> + <WithdrawPage talerWithdrawUri={queryParams.talerWithdrawUri} /> </div> </section> }} /> |