dd53: Deposits should use the receiver name of the payto-URI of the target account

2 files changed, 72 insertions, 56 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",
diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx b/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx
index 4d045ee13..7b80977f3 100644
--- a/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx
@@ -23,13 +23,12 @@ import {
   stringifyPaytoUri,
   validateIban,
 } from "@gnu-taler/taler-util";
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { styled } from "@linaria/react";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { ErrorMessage } from "../../components/ErrorMessage.js";
-import { SelectList } from "../../components/SelectList.js";
-import { Input, SubTitle, SvgIcon } from "../../components/styled/index.js";
-import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import { SubTitle, SvgIcon } from "../../components/styled/index.js";
 import { Button } from "../../mui/Button.js";
 import { TextFieldHandler } from "../../mui/handlers.js";
 import { TextField } from "../../mui/TextField.js";
@@ -110,6 +109,7 @@ export function ReadyView({
         <div style={{ width: "100%", display: "flex" }}>
           {Object.entries(accountType.list).map(([key, name], idx) => (
             <div
+              key={idx}
               style={{
                 marginLeft: 8,
                 padding: 8,
@@ -119,7 +119,7 @@ export function ReadyView({
                   accountType.value === key ? "#0042b2" : "unset",
                 color: accountType.value === key ? "white" : "unset",
               }}
-              onClick={(e) => {
+              onClick={() => {
                 if (accountType.onChange) {
                   accountType.onChange(key);
                 }
@@ -130,6 +130,7 @@ export function ReadyView({
           ))}
         </div>
         <div style={{ border: "1px solid gray", padding: 8, borderRadius: 5 }}>
+          --- {uri.value} ---
           <p>
             <CustomFieldByAccountType
               type={accountType.value as AccountType}
@@ -431,7 +432,7 @@ function BitcoinAddressAccount({ field }: { field: TextFieldHandler }): VNode {
 }
 
 function undefinedIfEmpty<T extends object>(obj: T): T | undefined {
-  return Object.keys(obj).some((k) => (obj as any)[k] !== undefined)
+  return Object.keys(obj).some((k) => (obj as Record<string,unknown>)[k] !== undefined)
     ? obj
     : undefined;
 }
@@ -488,20 +489,21 @@ function TalerBankAddressAccount({
 }
 
 //Taken from libeufin and libeufin took it from the ISO20022 XSD schema
-const bicRegex = /^[A-Z]{6}[A-Z2-9][A-NP-Z0-9]([A-Z0-9]{3})?$/;
-const ibanRegex = /^[A-Z]{2}[0-9]{2}[a-zA-Z0-9]{1,30}$/;
+// const bicRegex = /^[A-Z]{6}[A-Z2-9][A-NP-Z0-9]([A-Z0-9]{3})?$/;
+// const ibanRegex = /^[A-Z]{2}[0-9]{2}[a-zA-Z0-9]{1,30}$/;
 
 function IbanAddressAccount({ field }: { field: TextFieldHandler }): VNode {
   const { i18n } = useTranslationContext();
-  const [bic, setBic] = useState<string | undefined>(undefined);
+  // const [bic, setBic] = useState<string | undefined>(undefined);
   const [iban, setIban] = useState<string | undefined>(undefined);
   const [name, setName] = useState<string | undefined>(undefined);
-  const errors = undefinedIfEmpty({
-    bic: !bic
-      ? undefined
-      : !bicRegex.test(bic)
-      ? i18n.str`Invalid bic`
-      : undefined,
+  const bic = ""
+  const errorsFN = (iban:string | undefined, name: string | undefined) => undefinedIfEmpty({
+    // bic: !bic
+    //   ? undefined
+    //   : !bicRegex.test(bic)
+    //   ? i18n.str`Invalid bic`
+    //   : undefined,
     iban: !iban
       ? i18n.str`Can't be empty`
       : validateIban(iban).type === "invalid"
@@ -509,16 +511,20 @@ function IbanAddressAccount({ field }: { field: TextFieldHandler }): VNode {
       : undefined,
     name: !name ? i18n.str`Can't be empty` : undefined,
   });
+  const errors = errorsFN(iban, name)
 
   function sendUpdateIfNoErrors(
     bic: string | undefined,
     iban: string,
     name: string,
   ): void {
-    if (!errors && field.onInput) {
+    if (!field.onInput) return;
+    if (!errorsFN(iban, name)) {
       const p = buildPayto("iban", iban, bic);
       p.params["receiver-name"] = name;
       field.onInput(stringifyPaytoUri(p));
+    } else {
+      field.onInput("")
     }
   }
   return (
@@ -584,7 +590,7 @@ function CustomFieldByAccountType({
   type: AccountType;
   field: TextFieldHandler;
 }): VNode {
-  const { i18n } = useTranslationContext();
+  // const { i18n } = useTranslationContext();
 
   const AccountForm = formComponentByAccountType[type];