From 4f726b73e66535a69a961da30cf3dcddbbbd9efc Mon Sep 17 00:00:00 2001 From: Sebastian Date: Thu, 1 Jun 2023 14:26:28 -0300 Subject: [PATCH] tx state ui --- .../{TransactionItem.tsx => HistoryItem.tsx} | 124 +++-- .../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 +- 11 files changed, 676 insertions(+), 69 deletions(-) rename packages/taler-wallet-webextension/src/components/{TransactionItem.tsx => HistoryItem.tsx} (78%) 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 diff --git a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx b/packages/taler-wallet-webextension/src/components/HistoryItem.tsx similarity index 78% rename from packages/taler-wallet-webextension/src/components/TransactionItem.tsx rename to packages/taler-wallet-webextension/src/components/HistoryItem.tsx index 15669e63d..a0ce04460 100644 --- a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx +++ b/packages/taler-wallet-webextension/src/components/HistoryItem.tsx @@ -39,7 +39,7 @@ import { } from "./styled/index.js"; import { Time } from "./Time.js"; -export function TransactionItem(props: { tx: Transaction }): VNode { +export function HistoryItem(props: { tx: Transaction }): VNode { const tx = props.tx; const { i18n } = useTranslationContext(); /** @@ -48,14 +48,15 @@ export function TransactionItem(props: { tx: Transaction }): VNode { switch (tx.type) { case TransactionType.Withdrawal: return ( - @@ -276,9 +296,9 @@ function TransactionLayout(props: TransactionLayoutProps): VNode { )} - {props.pending && ( + {props.description && ( - {props.pending} + {props.description} )} @@ -286,7 +306,7 @@ function TransactionLayout(props: TransactionLayoutProps): VNode { @@ -294,7 +314,7 @@ function TransactionLayout(props: TransactionLayoutProps): VNode { ); } -interface TransactionLayoutProps { +interface LayoutProps { debitCreditIndicator: "debit" | "credit" | "unknown"; amount: AmountString | "unknown"; timestamp: AbsoluteTime; @@ -302,13 +322,14 @@ interface TransactionLayoutProps { subtitle?: string; id: string; iconPath: string; - pending?: string; + currentState: TransactionMajorState; + description?: string; } interface TransactionAmountProps { debitCreditIndicator: "debit" | "credit" | "unknown"; amount: AmountJson; - pending: boolean; + currentState: TransactionMajorState; } function TransactionAmount(props: TransactionAmountProps): VNode { @@ -328,24 +349,43 @@ function TransactionAmount(props: TransactionAmountProps): VNode { {sign} {Amounts.stringifyValue(props.amount, 2)} - {props.pending && ( -
- PENDING + {props.currentState === TransactionMajorState.Aborted ? ( +
+ ABORTED
- )} + ) : props.currentState === TransactionMajorState.Failed ? ( +
+ FAILED +
+ ) : undefined} ); } 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 @@ - +