aboutsummaryrefslogtreecommitdiff
path: root/packages/taler-wallet-webextension/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'packages/taler-wallet-webextension/src/components')
-rw-r--r--packages/taler-wallet-webextension/src/components/HistoryItem.tsx (renamed from packages/taler-wallet-webextension/src/components/TransactionItem.tsx)124
1 files changed, 82 insertions, 42 deletions
diff --git a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx b/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 (
- <TransactionLayout
+ <Layout
id={tx.transactionId}
amount={tx.amountEffective}
debitCreditIndicator={"credit"}
title={new URL(tx.exchangeBaseUrl).hostname}
timestamp={AbsoluteTime.fromPreciseTimestamp(tx.timestamp)}
iconPath={"W"}
- pending={
+ currentState={tx.txState.major}
+ description={
tx.txState.major === TransactionMajorState.Pending
? tx.withdrawalDetails.type ===
WithdrawalType.TalerBankIntegrationApi
@@ -71,14 +72,15 @@ export function TransactionItem(props: { tx: Transaction }): VNode {
);
case TransactionType.InternalWithdrawal:
return (
- <TransactionLayout
+ <Layout
id={tx.transactionId}
amount={tx.amountEffective}
debitCreditIndicator={"credit"}
title={new URL(tx.exchangeBaseUrl).hostname}
timestamp={AbsoluteTime.fromPreciseTimestamp(tx.timestamp)}
iconPath={"I"}
- pending={
+ currentState={tx.txState.major}
+ description={
tx.txState.major === TransactionMajorState.Pending
? tx.withdrawalDetails.type ===
WithdrawalType.TalerBankIntegrationApi
@@ -94,7 +96,7 @@ export function TransactionItem(props: { tx: Transaction }): VNode {
);
case TransactionType.Payment:
return (
- <TransactionLayout
+ <Layout
id={tx.transactionId}
amount={tx.amountEffective}
debitCreditIndicator={"debit"}
@@ -102,7 +104,8 @@ export function TransactionItem(props: { tx: Transaction }): VNode {
subtitle={tx.info.summary}
timestamp={AbsoluteTime.fromPreciseTimestamp(tx.timestamp)}
iconPath={"P"}
- pending={
+ currentState={tx.txState.major}
+ description={
tx.txState.major === TransactionMajorState.Pending
? i18n.str`Payment in progress`
: undefined
@@ -111,7 +114,7 @@ export function TransactionItem(props: { tx: Transaction }): VNode {
);
case TransactionType.Refund:
return (
- <TransactionLayout
+ <Layout
id={tx.transactionId}
amount={tx.amountEffective}
debitCreditIndicator={"credit"}
@@ -123,7 +126,8 @@ export function TransactionItem(props: { tx: Transaction }): VNode {
} //FIXME: DD37 wallet-core is not returning this value
timestamp={AbsoluteTime.fromPreciseTimestamp(tx.timestamp)}
iconPath={"R"}
- pending={
+ currentState={tx.txState.major}
+ description={
tx.txState.major === TransactionMajorState.Pending
? i18n.str`Executing refund...`
: undefined
@@ -132,14 +136,15 @@ export function TransactionItem(props: { tx: Transaction }): VNode {
);
case TransactionType.Tip:
return (
- <TransactionLayout
+ <Layout
id={tx.transactionId}
amount={tx.amountEffective}
debitCreditIndicator={"credit"}
title={new URL(tx.merchantBaseUrl).hostname}
timestamp={AbsoluteTime.fromPreciseTimestamp(tx.timestamp)}
iconPath={"T"}
- pending={
+ currentState={tx.txState.major}
+ description={
tx.txState.major === TransactionMajorState.Pending
? i18n.str`Grabbing the tipping...`
: undefined
@@ -148,14 +153,15 @@ export function TransactionItem(props: { tx: Transaction }): VNode {
);
case TransactionType.Refresh:
return (
- <TransactionLayout
+ <Layout
id={tx.transactionId}
amount={tx.amountEffective}
debitCreditIndicator={"credit"}
title={"Refresh"}
timestamp={AbsoluteTime.fromPreciseTimestamp(tx.timestamp)}
iconPath={"R"}
- pending={
+ currentState={tx.txState.major}
+ description={
tx.txState.major === TransactionMajorState.Pending
? i18n.str`Refreshing coins...`
: undefined
@@ -164,14 +170,15 @@ export function TransactionItem(props: { tx: Transaction }): VNode {
);
case TransactionType.Deposit:
return (
- <TransactionLayout
+ <Layout
id={tx.transactionId}
amount={tx.amountEffective}
debitCreditIndicator={"debit"}
title={tx.targetPaytoUri}
timestamp={AbsoluteTime.fromPreciseTimestamp(tx.timestamp)}
iconPath={"D"}
- pending={
+ currentState={tx.txState.major}
+ description={
tx.txState.major === TransactionMajorState.Pending
? i18n.str`Deposit in progress`
: undefined
@@ -180,14 +187,15 @@ export function TransactionItem(props: { tx: Transaction }): VNode {
);
case TransactionType.PeerPullCredit:
return (
- <TransactionLayout
+ <Layout
id={tx.transactionId}
amount={tx.amountEffective}
debitCreditIndicator={"credit"}
title={tx.info.summary || "Invoice"}
timestamp={AbsoluteTime.fromPreciseTimestamp(tx.timestamp)}
iconPath={"I"}
- pending={
+ currentState={tx.txState.major}
+ description={
tx.txState.major === TransactionMajorState.Pending
? i18n.str`Waiting to be paid`
: undefined
@@ -196,14 +204,15 @@ export function TransactionItem(props: { tx: Transaction }): VNode {
);
case TransactionType.PeerPullDebit:
return (
- <TransactionLayout
+ <Layout
id={tx.transactionId}
amount={tx.amountEffective}
debitCreditIndicator={"debit"}
title={tx.info.summary || "Invoice"}
timestamp={AbsoluteTime.fromPreciseTimestamp(tx.timestamp)}
iconPath={"I"}
- pending={
+ currentState={tx.txState.major}
+ description={
tx.txState.major === TransactionMajorState.Pending
? i18n.str`Payment in progress`
: undefined
@@ -212,14 +221,15 @@ export function TransactionItem(props: { tx: Transaction }): VNode {
);
case TransactionType.PeerPushCredit:
return (
- <TransactionLayout
+ <Layout
id={tx.transactionId}
amount={tx.amountEffective}
debitCreditIndicator={"credit"}
title={tx.info.summary || "Transfer"}
timestamp={AbsoluteTime.fromPreciseTimestamp(tx.timestamp)}
iconPath={"T"}
- pending={
+ currentState={tx.txState.major}
+ description={
tx.txState.major === TransactionMajorState.Pending
? i18n.str`Receiving the transfer`
: undefined
@@ -228,14 +238,15 @@ export function TransactionItem(props: { tx: Transaction }): VNode {
);
case TransactionType.PeerPushDebit:
return (
- <TransactionLayout
+ <Layout
id={tx.transactionId}
amount={tx.amountEffective}
debitCreditIndicator={"debit"}
title={tx.info.summary || "Transfer"}
timestamp={AbsoluteTime.fromPreciseTimestamp(tx.timestamp)}
iconPath={"T"}
- pending={
+ currentState={tx.txState.major}
+ description={
tx.txState.major === TransactionMajorState.Pending
? i18n.str`Waiting to be received`
: undefined
@@ -248,13 +259,22 @@ export function TransactionItem(props: { tx: Transaction }): VNode {
}
}
-function TransactionLayout(props: TransactionLayoutProps): VNode {
+function Layout(props: LayoutProps): VNode {
const { i18n } = useTranslationContext();
return (
<HistoryRow
href={Pages.balanceTransaction({ tid: props.id })}
style={{
- backgroundColor: props.pending ? "lightcyan" : "inherit",
+ backgroundColor:
+ props.currentState === TransactionMajorState.Pending ||
+ props.currentState === TransactionMajorState.Dialog
+ ? "lightcyan"
+ : props.currentState === TransactionMajorState.Failed
+ ? "#ff000040"
+ : props.currentState === TransactionMajorState.Aborted ||
+ props.currentState === TransactionMajorState.Aborting
+ ? "#00000010"
+ : "inherit",
alignItems: "center",
}}
>
@@ -276,9 +296,9 @@ function TransactionLayout(props: TransactionLayoutProps): VNode {
</div>
)}
</LargeText>
- {props.pending && (
+ {props.description && (
<LightText style={{ marginTop: 5, marginBottom: 5 }}>
- <i18n.Translate>{props.pending}</i18n.Translate>
+ <i18n.Translate>{props.description}</i18n.Translate>
</LightText>
)}
<SmallLightText style={{ marginTop: 5 }}>
@@ -286,7 +306,7 @@ function TransactionLayout(props: TransactionLayoutProps): VNode {
</SmallLightText>
</Column>
<TransactionAmount
- pending={props.pending !== undefined}
+ currentState={props.currentState}
amount={Amounts.parseOrThrow(props.amount)}
debitCreditIndicator={props.debitCreditIndicator}
/>
@@ -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 {
<Column
style={{
textAlign: "center",
- color: props.pending
- ? "gray"
- : sign === "+"
- ? "darkgreen"
- : sign === "-"
- ? "darkred"
- : undefined,
+ color:
+ props.currentState !== TransactionMajorState.Done
+ ? "gray"
+ : sign === "+"
+ ? "darkgreen"
+ : sign === "-"
+ ? "darkred"
+ : undefined,
}}
>
<ExtraLargeText>
{sign}
{Amounts.stringifyValue(props.amount, 2)}
</ExtraLargeText>
- {props.pending && (
- <div>
- <i18n.Translate>PENDING</i18n.Translate>
+ {props.currentState === TransactionMajorState.Aborted ? (
+ <div
+ style={{
+ color: "black",
+ border: "1px black solid",
+ borderRadius: 8,
+ padding: 4,
+ }}
+ >
+ <i18n.Translate>ABORTED</i18n.Translate>
</div>
- )}
+ ) : props.currentState === TransactionMajorState.Failed ? (
+ <div
+ style={{
+ color: "red",
+ border: "1px darkred solid",
+ borderRadius: 8,
+ padding: 4,
+ }}
+ >
+ <i18n.Translate>FAILED</i18n.Translate>
+ </div>
+ ) : undefined}
</Column>
);
}
generated by cgit v1.2.3 (git 2.26.2) at 2024-08-24 01:34:42 +0000