1 files changed, 50 insertions, 40 deletions
diff --git a/packages/taler-wallet-webextension/src/components/HistoryItem.tsx b/packages/taler-wallet-webextension/src/components/HistoryItem.tsx
index 8bdd98f6a..833448e67 100644
--- a/packages/taler-wallet-webextension/src/components/HistoryItem.tsx
+++ b/packages/taler-wallet-webextension/src/components/HistoryItem.tsx
@@ -24,6 +24,7 @@ import {
   WithdrawalType,
   TransactionMajorState,
   DenomLossEventType,
+  parsePaytoUri,
 } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
@@ -136,9 +137,7 @@ export function HistoryItem(props: { tx: Transaction }): VNode {
         />
       );
     case TransactionType.Reward:
-      return (
-        <div>not supported</div>
-      );
+      return <div>not supported</div>;
     case TransactionType.Refresh:
       return (
         <Layout
@@ -156,13 +155,16 @@ export function HistoryItem(props: { tx: Transaction }): VNode {
           }
         />
       );
-    case TransactionType.Deposit:
+    case TransactionType.Deposit:{
+      const payto = parsePaytoUri(tx.targetPaytoUri);
+      const title = payto === undefined || !payto.isKnown ? tx.targetPaytoUri : 
+        payto.params["receiver-name"] ;
       return (
         <Layout
           id={tx.transactionId}
           amount={tx.amountEffective}
           debitCreditIndicator={"debit"}
-          title={tx.targetPaytoUri}
+          title={title}
           timestamp={AbsoluteTime.fromPreciseTimestamp(tx.timestamp)}
           iconPath={"D"}
           currentState={tx.txState.major}
@@ -173,6 +175,7 @@ export function HistoryItem(props: { tx: Transaction }): VNode {
           }
         />
       );
+    }
     case TransactionType.PeerPullCredit:
       return (
         <Layout
@@ -241,49 +244,56 @@ export function HistoryItem(props: { tx: Transaction }): VNode {
           }
         />
       );
-    case TransactionType.DenomLoss:
+    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}
-          />
+          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}
-          />
+          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}
-          />
+          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)
+          assertUnreachable(tx.lossEventType);
         }
       }
+      break;
+    }
     case TransactionType.Recoup:
       throw Error("recoup transaction not implemented");
     default: {
@@ -300,12 +310,12 @@ function Layout(props: LayoutProps): VNode {
       style={{
         backgroundColor:
           props.currentState === TransactionMajorState.Pending ||
-            props.currentState === TransactionMajorState.Dialog
+          props.currentState === TransactionMajorState.Dialog
             ? "lightcyan"
             : props.currentState === TransactionMajorState.Failed
               ? "#ff000040"
               : props.currentState === TransactionMajorState.Aborted ||
-                props.currentState === TransactionMajorState.Aborting
+                  props.currentState === TransactionMajorState.Aborting
                 ? "#00000010"
                 : "inherit",
         alignItems: "center",