From 4f726b73e66535a69a961da30cf3dcddbbbd9efc Mon Sep 17 00:00:00 2001 From: Sebastian Date: Thu, 1 Jun 2023 14:26:28 -0300 Subject: tx state ui --- .../src/components/HistoryItem.tsx | 391 +++++++++++++++++ .../src/components/TransactionItem.tsx | 351 ---------------- .../taler-wallet-webextension/src/spa/index.html | 15 +- .../src/spa/manifest.json | 24 +- .../src/spa/static/img/taler-alert-128.png | Bin 0 -> 8944 bytes .../src/spa/static/img/taler-alert-48.png | Bin 0 -> 2811 bytes .../src/spa/static/img/taler-logo-128.png | Bin 0 -> 8941 bytes .../src/spa/static/img/taler-logo-2022.svg | 468 +++++++++++++++++++++ .../src/spa/static/img/taler-logo-48.png | Bin 0 -> 2790 bytes .../src/wallet/History.stories.tsx | 96 ++++- .../src/wallet/History.tsx | 4 +- .../src/wallet/Transaction.tsx | 14 +- 12 files changed, 985 insertions(+), 378 deletions(-) create mode 100644 packages/taler-wallet-webextension/src/components/HistoryItem.tsx delete mode 100644 packages/taler-wallet-webextension/src/components/TransactionItem.tsx create mode 100644 packages/taler-wallet-webextension/src/spa/static/img/taler-alert-128.png create mode 100644 packages/taler-wallet-webextension/src/spa/static/img/taler-alert-48.png create mode 100644 packages/taler-wallet-webextension/src/spa/static/img/taler-logo-128.png create mode 100644 packages/taler-wallet-webextension/src/spa/static/img/taler-logo-2022.svg create mode 100644 packages/taler-wallet-webextension/src/spa/static/img/taler-logo-48.png (limited to 'packages/taler-wallet-webextension') diff --git a/packages/taler-wallet-webextension/src/components/HistoryItem.tsx b/packages/taler-wallet-webextension/src/components/HistoryItem.tsx new file mode 100644 index 000000000..a0ce04460 --- /dev/null +++ b/packages/taler-wallet-webextension/src/components/HistoryItem.tsx @@ -0,0 +1,391 @@ +/* + This file is part of GNU Taler + (C) 2022 Taler Systems S.A. + + GNU 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. + + GNU 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 + GNU Taler; see the file COPYING. If not, see + */ + +import { + AmountJson, + Amounts, + AmountString, + AbsoluteTime, + Transaction, + TransactionType, + WithdrawalType, + TransactionMajorState, +} from "@gnu-taler/taler-util"; +import { h, VNode } from "preact"; +import { useTranslationContext } from "@gnu-taler/web-util/browser"; +import { Avatar } from "../mui/Avatar.js"; +import { Pages } from "../NavigationBar.js"; +import { assertUnreachable } from "../utils/index.js"; +import { + Column, + ExtraLargeText, + HistoryRow, + LargeText, + LightText, + SmallLightText, +} from "./styled/index.js"; +import { Time } from "./Time.js"; + +export function HistoryItem(props: { tx: Transaction }): VNode { + const tx = props.tx; + const { i18n } = useTranslationContext(); + /** + * + */ + switch (tx.type) { + case TransactionType.Withdrawal: + return ( + + ); + case TransactionType.InternalWithdrawal: + return ( + + ); + case TransactionType.Payment: + return ( + + ); + case TransactionType.Refund: + return ( + + ); + case TransactionType.Tip: + return ( + + ); + case TransactionType.Refresh: + return ( + + ); + case TransactionType.Deposit: + return ( + + ); + case TransactionType.PeerPullCredit: + return ( + + ); + case TransactionType.PeerPullDebit: + return ( + + ); + case TransactionType.PeerPushCredit: + return ( + + ); + case TransactionType.PeerPushDebit: + return ( + + ); + default: { + assertUnreachable(tx); + } + } +} + +function Layout(props: LayoutProps): VNode { + const { i18n } = useTranslationContext(); + return ( + + + {props.iconPath} + + + +
{props.title}
+ {props.subtitle && ( +
+ {props.subtitle} +
+ )} +
+ {props.description && ( + + {props.description} + + )} + + +
+ +
+ ); +} + +interface LayoutProps { + debitCreditIndicator: "debit" | "credit" | "unknown"; + amount: AmountString | "unknown"; + timestamp: AbsoluteTime; + title: string; + subtitle?: string; + id: string; + iconPath: string; + currentState: TransactionMajorState; + description?: string; +} + +interface TransactionAmountProps { + debitCreditIndicator: "debit" | "credit" | "unknown"; + amount: AmountJson; + currentState: TransactionMajorState; +} + +function TransactionAmount(props: TransactionAmountProps): VNode { + const { i18n } = useTranslationContext(); + let sign: string; + switch (props.debitCreditIndicator) { + case "credit": + sign = "+"; + break; + case "debit": + sign = "-"; + break; + case "unknown": + sign = ""; + } + return ( + + + {sign} + {Amounts.stringifyValue(props.amount, 2)} + + {props.currentState === TransactionMajorState.Aborted ? ( +
+ ABORTED +
+ ) : props.currentState === TransactionMajorState.Failed ? ( +
+ FAILED +
+ ) : undefined} +
+ ); +} diff --git a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx deleted file mode 100644 index 15669e63d..000000000 --- a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx +++ /dev/null @@ -1,351 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2022 Taler Systems S.A. - - GNU 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. - - GNU 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 - GNU Taler; see the file COPYING. If not, see - */ - -import { - AmountJson, - Amounts, - AmountString, - AbsoluteTime, - Transaction, - TransactionType, - WithdrawalType, - TransactionMajorState, -} from "@gnu-taler/taler-util"; -import { h, VNode } from "preact"; -import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import { Avatar } from "../mui/Avatar.js"; -import { Pages } from "../NavigationBar.js"; -import { assertUnreachable } from "../utils/index.js"; -import { - Column, - ExtraLargeText, - HistoryRow, - LargeText, - LightText, - SmallLightText, -} from "./styled/index.js"; -import { Time } from "./Time.js"; - -export function TransactionItem(props: { tx: Transaction }): VNode { - const tx = props.tx; - const { i18n } = useTranslationContext(); - /** - * - */ - switch (tx.type) { - case TransactionType.Withdrawal: - return ( - - ); - case TransactionType.InternalWithdrawal: - return ( - - ); - case TransactionType.Payment: - return ( - - ); - case TransactionType.Refund: - return ( - - ); - case TransactionType.Tip: - return ( - - ); - case TransactionType.Refresh: - return ( - - ); - case TransactionType.Deposit: - return ( - - ); - case TransactionType.PeerPullCredit: - return ( - - ); - case TransactionType.PeerPullDebit: - return ( - - ); - case TransactionType.PeerPushCredit: - return ( - - ); - case TransactionType.PeerPushDebit: - return ( - - ); - default: { - assertUnreachable(tx); - } - } -} - -function TransactionLayout(props: TransactionLayoutProps): VNode { - const { i18n } = useTranslationContext(); - return ( - - - {props.iconPath} - - - -
{props.title}
- {props.subtitle && ( -
- {props.subtitle} -
- )} -
- {props.pending && ( - - {props.pending} - - )} - - -
- -
- ); -} - -interface TransactionLayoutProps { - debitCreditIndicator: "debit" | "credit" | "unknown"; - amount: AmountString | "unknown"; - timestamp: AbsoluteTime; - title: string; - subtitle?: string; - id: string; - iconPath: string; - pending?: string; -} - -interface TransactionAmountProps { - debitCreditIndicator: "debit" | "credit" | "unknown"; - amount: AmountJson; - pending: boolean; -} - -function TransactionAmount(props: TransactionAmountProps): VNode { - const { i18n } = useTranslationContext(); - let sign: string; - switch (props.debitCreditIndicator) { - case "credit": - sign = "+"; - break; - case "debit": - sign = "-"; - break; - case "unknown": - sign = ""; - } - return ( - - - {sign} - {Amounts.stringifyValue(props.amount, 2)} - - {props.pending && ( -
- PENDING -
- )} -
- ); -} diff --git a/packages/taler-wallet-webextension/src/spa/index.html b/packages/taler-wallet-webextension/src/spa/index.html index f352c7bf4..0d2cf0e0b 100644 --- a/packages/taler-wallet-webextension/src/spa/index.html +++ b/packages/taler-wallet-webextension/src/spa/index.html @@ -1,7 +1,7 @@ - +