From 9cd1062f1bd608b3f5b6910983b339401a227452 Mon Sep 17 00:00:00 2001 From: Florian Dold Date: Wed, 18 Nov 2020 17:33:02 +0100 Subject: towards a nicer transaction history --- .../src/operations/transactions.ts | 1 + .../taler-wallet-core/src/types/transactions.ts | 2 + .../taler-wallet-webextension/src/pages/popup.tsx | 167 +++++++++++++++++++-- .../taler-wallet-webextension/static/img/COPYRIGHT | 15 ++ .../static/img/ri-bank-line.svg | 1 + .../static/img/ri-file-unknown-line.svg | 1 + .../static/img/ri-hand-heart-line.svg | 1 + .../static/img/ri-refresh-line.svg | 1 + .../static/img/ri-refund-2-line.svg | 1 + .../static/img/ri-shopping-cart-line.svg | 1 + 10 files changed, 179 insertions(+), 12 deletions(-) create mode 100644 packages/taler-wallet-webextension/static/img/COPYRIGHT create mode 100644 packages/taler-wallet-webextension/static/img/ri-bank-line.svg create mode 100644 packages/taler-wallet-webextension/static/img/ri-file-unknown-line.svg create mode 100644 packages/taler-wallet-webextension/static/img/ri-hand-heart-line.svg create mode 100644 packages/taler-wallet-webextension/static/img/ri-refresh-line.svg create mode 100644 packages/taler-wallet-webextension/static/img/ri-refund-2-line.svg create mode 100644 packages/taler-wallet-webextension/static/img/ri-shopping-cart-line.svg (limited to 'packages') diff --git a/packages/taler-wallet-core/src/operations/transactions.ts b/packages/taler-wallet-core/src/operations/transactions.ts index 4f318faba..e4cbdd8c3 100644 --- a/packages/taler-wallet-core/src/operations/transactions.ts +++ b/packages/taler-wallet-core/src/operations/transactions.ts @@ -332,6 +332,7 @@ export async function getTransactions( TransactionType.Tip, tipRecord.walletTipId, ), + merchantBaseUrl: tipRecord.merchantBaseUrl, error: tipRecord.lastError, }); }); diff --git a/packages/taler-wallet-core/src/types/transactions.ts b/packages/taler-wallet-core/src/types/transactions.ts index b9d18944a..0a683f298 100644 --- a/packages/taler-wallet-core/src/types/transactions.ts +++ b/packages/taler-wallet-core/src/types/transactions.ts @@ -288,6 +288,8 @@ interface TransactionTip extends TransactionCommon { // Amount will be (or was) added to the wallet's balance after fees and refreshing amountEffective: AmountString; + + merchantBaseUrl: string; } // A transaction shown for refreshes that are not associated to other transactions diff --git a/packages/taler-wallet-webextension/src/pages/popup.tsx b/packages/taler-wallet-webextension/src/pages/popup.tsx index d7cdd548e..8d8d5a85d 100644 --- a/packages/taler-wallet-webextension/src/pages/popup.tsx +++ b/packages/taler-wallet-webextension/src/pages/popup.tsx @@ -36,6 +36,8 @@ import { TransactionsResponse, Transaction, TransactionType, + AmountString, + Timestamp, } from "taler-wallet-core"; import { abbrev, renderAmount, PageLink } from "../renderHtml"; @@ -301,19 +303,161 @@ class WalletBalanceView extends React.Component { } } -function Icon({ l }: { l: string }): JSX.Element { - return
{l}
; +interface TransactionAmountProps { + debitCreditIndicator: "debit" | "credit" | "unknown"; + amount: AmountString | "unknown"; + pending: boolean; } -function formatAndCapitalize(text: string): string { - text = text.replace("-", " "); - text = text.replace(/^./, text[0].toUpperCase()); - return text; +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: React.CSSProperties = { + marginLeft: "auto", + display: "flex", + flexDirection: "column", + alignItems: "center", + alignSelf: "center" + }; + if (props.pending) { + style.color = "gray"; + } + return ( +
+
+ {sign} + {amount} +
+
{currency}
+
+ ); +} + +interface TransactionLayoutProps { + debitCreditIndicator: "debit" | "credit" | "unknown"; + amount: AmountString | "unknown"; + timestamp: Timestamp; + title: 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 ( +
+ +
+
{dateStr}
+
+ {props.title} + {props.pending ? ( + (Pending) + ) : null} +
+ +
{props.subtitle}
+
+ +
+ ); } function TransactionItem(props: { tx: Transaction }): JSX.Element { const tx = props.tx; - return 
{JSON.stringify(tx)}
+ switch (tx.type) { + case TransactionType.Withdrawal: + return ( + + ); + case TransactionType.Payment: + return ( + + ); + case TransactionType.Refund: + return ( + + ); + case TransactionType.Tip: + return ( + + ); + case TransactionType.Refresh: + return ( + + ); + } } function WalletHistory(props: any): JSX.Element { @@ -334,9 +478,11 @@ function WalletHistory(props: any): JSX.Element { return
Loading ...
; } + const txs = [...transactions.transactions].reverse(); + return (
- {transactions.transactions.map((tx) => ( + {txs.map((tx) => ( ))}
@@ -379,10 +525,7 @@ function WalletDebug(props: any): JSX.Element { return (

Debug tools:

- - - - +
diff --git a/packages/taler-wallet-webextension/static/img/COPYRIGHT b/packages/taler-wallet-webextension/static/img/COPYRIGHT new file mode 100644 index 000000000..d1a2bf1de --- /dev/null +++ b/packages/taler-wallet-webextension/static/img/COPYRIGHT @@ -0,0 +1,15 @@ +# Icon Copyright Info + +## Remix Icons + +https://github.com/Remix-Design/RemixIcon + +Remix Icon is licensed under the Apache License Version 2.0. Feel free to use +these icons in your products and distribute them. We would be very grateful if +you mention "Remix Icon" in your product info, but it's not required. The only +thing we ask is that these icons are not for sale. + + +### Used Icons + +* ri-*.svg diff --git a/packages/taler-wallet-webextension/static/img/ri-bank-line.svg b/packages/taler-wallet-webextension/static/img/ri-bank-line.svg new file mode 100644 index 000000000..8d987df79 --- /dev/null +++ b/packages/taler-wallet-webextension/static/img/ri-bank-line.svg @@ -0,0 +1 @@ + diff --git a/packages/taler-wallet-webextension/static/img/ri-file-unknown-line.svg b/packages/taler-wallet-webextension/static/img/ri-file-unknown-line.svg new file mode 100644 index 000000000..5203d49f5 --- /dev/null +++ b/packages/taler-wallet-webextension/static/img/ri-file-unknown-line.svg @@ -0,0 +1 @@ + diff --git a/packages/taler-wallet-webextension/static/img/ri-hand-heart-line.svg b/packages/taler-wallet-webextension/static/img/ri-hand-heart-line.svg new file mode 100644 index 000000000..a9c195eac --- /dev/null +++ b/packages/taler-wallet-webextension/static/img/ri-hand-heart-line.svg @@ -0,0 +1 @@ + diff --git a/packages/taler-wallet-webextension/static/img/ri-refresh-line.svg b/packages/taler-wallet-webextension/static/img/ri-refresh-line.svg new file mode 100644 index 000000000..6efa8554b --- /dev/null +++ b/packages/taler-wallet-webextension/static/img/ri-refresh-line.svg @@ -0,0 +1 @@ + diff --git a/packages/taler-wallet-webextension/static/img/ri-refund-2-line.svg b/packages/taler-wallet-webextension/static/img/ri-refund-2-line.svg new file mode 100644 index 000000000..5805daf09 --- /dev/null +++ b/packages/taler-wallet-webextension/static/img/ri-refund-2-line.svg @@ -0,0 +1 @@ + diff --git a/packages/taler-wallet-webextension/static/img/ri-shopping-cart-line.svg b/packages/taler-wallet-webextension/static/img/ri-shopping-cart-line.svg new file mode 100644 index 000000000..50dabf446 --- /dev/null +++ b/packages/taler-wallet-webextension/static/img/ri-shopping-cart-line.svg @@ -0,0 +1 @@ + -- cgit v1.2.3