fix #8693

2 files changed, 78 insertions, 2 deletions

diff --git a/packages/taler-wallet-webextension/src/components/HistoryItem.tsx b/packages/taler-wallet-webextension/src/components/HistoryItem.tsx
index 4b44365ea..8bdd98f6a 100644
--- a/packages/taler-wallet-webextension/src/components/HistoryItem.tsx
+++ b/packages/taler-wallet-webextension/src/components/HistoryItem.tsx
@@ -23,6 +23,7 @@ import {
   TransactionType,
   WithdrawalType,
   TransactionMajorState,
+  DenomLossEventType,
 } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
@@ -240,6 +241,49 @@ export function HistoryItem(props: { tx: Transaction }): VNode {
           }
         />
       );
+    case TransactionType.DenomLoss:
+      switch (tx.lossEventType) {
+        case DenomLossEventType.DenomExpired: {
+          return <Layout
+            id={tx.transactionId}
+            amount={tx.amountEffective}
+            debitCreditIndicator={"debit"}
+            title={i18n.str`Denomination expired`}
+            timestamp={AbsoluteTime.fromPreciseTimestamp(tx.timestamp)}
+            iconPath={"L"}
+            currentState={tx.txState.major}
+            description={undefined}
+          />
+        }
+        case DenomLossEventType.DenomVanished: {
+          return <Layout
+            id={tx.transactionId}
+            amount={tx.amountEffective}
+            debitCreditIndicator={"debit"}
+            title={i18n.str`Denomination vanished`}
+            timestamp={AbsoluteTime.fromPreciseTimestamp(tx.timestamp)}
+            iconPath={"L"}
+            currentState={tx.txState.major}
+            description={undefined}
+          />
+        }
+        case DenomLossEventType.DenomUnoffered: {
+
+          return <Layout
+            id={tx.transactionId}
+            amount={tx.amountEffective}
+            debitCreditIndicator={"debit"}
+            title={i18n.str`Denomination unoffered`}
+            timestamp={AbsoluteTime.fromPreciseTimestamp(tx.timestamp)}
+            iconPath={"L"}
+            currentState={tx.txState.major}
+            description={undefined}
+          />
+        }
+        default: {
+          assertUnreachable(tx.lossEventType)
+        }
+      }
     case TransactionType.Recoup:
       throw Error("recoup transaction not implemented");
     default: {
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index 10ca67663..a5fa66cbe 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -278,7 +278,7 @@ function TransactionTemplate({
           <WarningBox>
             <div style={{ justifyContent: "center", lineHeight: "25px" }}>
               <i18n.Translate>This transaction is not completed</i18n.Translate>
-              <Link onClick={onRetry} style={{padding: 0}}>
+              <Link onClick={onRetry} style={{ padding: 0 }}>
                 <SvgIcon
                   title={i18n.str`Retry`}
                   dangerouslySetInnerHTML={{ __html: refreshIcon }}
@@ -485,7 +485,7 @@ export function TransactionView({
                 </span>
                 :
                 <span><i18n.Translate>
-                  Now the payment service provider is waiting for <Amount value={raw} /> to 
+                  Now the payment service provider is waiting for <Amount value={raw} /> to
                   be transferred. Use the information below to complete the operation
                   by making a wire transfer from your bank account.
                 </i18n.Translate></span>}
@@ -1026,6 +1026,38 @@ export function TransactionView({
     );
   }
 
+  if (transaction.type === TransactionType.DenomLoss) {
+    return (
+      <TransactionTemplate
+        transaction={transaction}
+        onDelete={onDelete}
+        onRetry={onRetry}
+        onAbort={onAbort}
+        onResume={onResume}
+        onSuspend={onSuspend}
+        onCancel={onCancel}
+      >
+        <Header
+          timestamp={transaction.timestamp}
+          type={i18n.str`Debit`}
+          total={effective}
+          kind="negative"
+        >
+          <i18n.Translate>Lost</i18n.Translate>
+        </Header>
+
+        <Part
+          title={i18n.str`Exchange`}
+          text={transaction.exchangeBaseUrl as TranslatedString}
+          kind="neutral"
+        />
+        <Part
+          title={i18n.str`Reason`}
+          text={transaction.lossEventType as TranslatedString}
+        />
+      </TransactionTemplate>
+    );
+  }
   if (transaction.type === TransactionType.Recoup) {
     throw Error("recoup transaction not implemented");
   }