diff --git a/packages/taler-wallet-webextension/src/pages/popup.stories.tsx b/packages/taler-wallet-webextension/src/pages/popup.stories.tsx
index 5e1d0c3a2..1aec771a2 100644
--- a/packages/taler-wallet-webextension/src/pages/popup.stories.tsx
+++ b/packages/taler-wallet-webextension/src/pages/popup.stories.tsx
@@ -61,6 +61,7 @@ const exampleData = {
} as TransactionWithdrawal,
payment: {
...commonTransaction,
+ amountEffective: 'USD:11',
type: TransactionType.Payment,
info: {
contractTermsHash: 'ASDZXCASD',
diff --git a/packages/taler-wallet-webextension/src/pages/popup.tsx b/packages/taler-wallet-webextension/src/pages/popup.tsx
index ea496ac0a..5fb08b77e 100644
--- a/packages/taler-wallet-webextension/src/pages/popup.tsx
+++ b/packages/taler-wallet-webextension/src/pages/popup.tsx
@@ -455,33 +455,6 @@ export function WalletTransactionView({ transaction, onDelete, onBack }: WalletT
return (pending...)
}
- function CommonFields() {
- if (!transaction) return null;
- return
-
- Amount deduce |
- {transaction.amountRaw} |
-
-
- Amount received |
- {transaction.amountEffective} |
-
-
- Exchange fee |
- {Amounts.stringify(
- Amounts.sub(
- Amounts.parseOrThrow(transaction.amountRaw),
- Amounts.parseOrThrow(transaction.amountEffective),
- ).amount
- )} |
-
-
- When |
- {transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')} |
-
-
- }
-
if (transaction.type === TransactionType.Withdrawal) {
return (
@@ -491,7 +464,27 @@ export function WalletTransactionView({ transaction, onDelete, onBack }: WalletT
From
{transaction.exchangeBaseUrl}
-
+
+ Amount subtracted |
+ {transaction.amountRaw} |
+
+
+ Amount received |
+ {transaction.amountEffective} |
+
+
+ Exchange fee |
+ {Amounts.stringify(
+ Amounts.sub(
+ Amounts.parseOrThrow(transaction.amountRaw),
+ Amounts.parseOrThrow(transaction.amountEffective),
+ ).amount
+ )} |
+
+
+ When |
+ {transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')} |
+
@@ -525,7 +518,27 @@ export function WalletTransactionView({ transaction, onDelete, onBack }: WalletT
)}
}
-
+
+ Order amount |
+ {transaction.amountRaw} |
+
+
+ Order amount and fees |
+ {transaction.amountEffective} |
+
+
+ Exchange fee |
+ {Amounts.stringify(
+ Amounts.sub(
+ Amounts.parseOrThrow(transaction.amountEffective),
+ Amounts.parseOrThrow(transaction.amountRaw),
+ ).amount
+ )} |
+
+
+ When |
+ {transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')} |
+
@@ -542,7 +555,27 @@ export function WalletTransactionView({ transaction, onDelete, onBack }: WalletT
To
{transaction.targetPaytoUri}
-
+
+ Amount deposit |
+ {transaction.amountRaw} |
+
+
+ Amount deposit and fees |
+ {transaction.amountEffective} |
+
+
+ Exchange fee |
+ {Amounts.stringify(
+ Amounts.sub(
+ Amounts.parseOrThrow(transaction.amountEffective),
+ Amounts.parseOrThrow(transaction.amountRaw),
+ ).amount
+ )} |
+
+
+ When |
+ {transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')} |
+
@@ -559,7 +592,18 @@ export function WalletTransactionView({ transaction, onDelete, onBack }: WalletT
From
{transaction.exchangeBaseUrl}
-
+
+ Amount refreshed |
+ {transaction.amountRaw} |
+
+
+ Fees |
+ {transaction.amountEffective} |
+
+
+ When |
+ {transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')} |
+
@@ -576,7 +620,27 @@ export function WalletTransactionView({ transaction, onDelete, onBack }: WalletT
From
{transaction.merchantBaseUrl}
-
+
+ Amount deduce |
+ {transaction.amountRaw} |
+
+
+ Amount received |
+ {transaction.amountEffective} |
+
+
+ Exchange fee |
+ {Amounts.stringify(
+ Amounts.sub(
+ Amounts.parseOrThrow(transaction.amountRaw),
+ Amounts.parseOrThrow(transaction.amountEffective),
+ ).amount
+ )} |
+
+
+ When |
+ {transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')} |
+
@@ -611,7 +675,27 @@ export function WalletTransactionView({ transaction, onDelete, onBack }: WalletT
)}
}
-
+
+ Amount deduce |
+ {transaction.amountRaw} |
+
+
+ Amount received |
+ {transaction.amountEffective} |
+
+
+ Exchange fee |
+ {Amounts.stringify(
+ Amounts.sub(
+ Amounts.parseOrThrow(transaction.amountRaw),
+ Amounts.parseOrThrow(transaction.amountEffective),
+ ).amount
+ )} |
+
+
+ When |
+ {transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')} |
+