un-uglyfy, fix: 7442

packages/taler-wallet-webextension/src/components/AmountField.tsx

@@ -45,14 +45,13 @@ export function AmountField({
     return handler.value;
   }
   return (
-    <Fragment>
     <TextField
       label={label}
       type="number"
       min="0"
       step="0.1"
       variant="filled"
-        error={!!handler.error}
+      error={handler.error}
       required={required}
       startAdornment={
         <div style={{ padding: "25px 12px 8px 12px" }}>{currency}</div>
@@ -61,7 +60,5 @@ export function AmountField({
       disabled={!handler.onInput}
       onInput={positiveAmount}
     />
-      {handler.error && <ErrorText>{handler.error}</ErrorText>}
-    </Fragment>
   );
 }

packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx

@@ -78,7 +78,7 @@ export function ReadyView({
         <TextField
           label="Subject"
           variant="filled"
-          error={!!subject.error}
+          error={subject.error}
           required
           fullWidth
           value={subject.value}

packages/taler-wallet-webextension/src/cta/TransferCreate/views.tsx

@@ -68,7 +68,7 @@ export function ReadyView({
         <TextField
           label="Subject"
           variant="filled"
-          error={!!subject.error}
+          error={subject.error}
           required
           fullWidth
           value={subject.value}

packages/taler-wallet-webextension/src/mui/TextField.stories.tsx

@@ -56,13 +56,13 @@ const Input = (variant: Props["variant"]): VNode => {
         value="disabled"
       />
       <TextField
-        error
+        error={"Error"}
         variant={variant}
         label="Something"
         {...{ value, onChange }}
       />
       <TextField
-        error
+        error={"Error"}
         disabled
         variant={variant}
         label="Disabled and Error"

packages/taler-wallet-webextension/src/mui/TextField.tsx

@@ -30,7 +30,7 @@ export interface Props {
   autoFocus?: boolean;
   color?: Colors;
   disabled?: boolean;
-  error?: boolean;
+  error?: string;
   fullWidth?: boolean;
   helperText?: VNode | string;
   id?: string;
@@ -85,7 +85,12 @@ export function TextField({
     <FormControl {...props}>
       {label && <InputLabel>{label}</InputLabel>}
       <Input {...props}>{children}</Input>
-      {helperText && <FormHelperText>{helperText}</FormHelperText>}
+      {helperText && (
+        <FormHelperText error={props.error}>{helperText}</FormHelperText>
+      )}
+      {props.error ? (
+        <FormHelperText error="true">{props.error}</FormHelperText>
+      ) : undefined}
     </FormControl>
   );
 }

packages/taler-wallet-webextension/src/mui/input/FormControl.tsx

@@ -22,7 +22,7 @@ import { Colors } from "../style";
 export interface Props {
   color: Colors;
   disabled: boolean;
-  error: boolean;
+  error?: string;
   focused: boolean;
   fullWidth: boolean;
   hiddenLabel: boolean;
@@ -64,7 +64,7 @@ export const FormControlContext = createContext<FCCProps | null>(null);
 export function FormControl({
   color = "primary",
   disabled = false,
-  error = false,
+  error = undefined,
   focused: visuallyFocused,
   fullWidth = false,
   hiddenLabel = false,
@@ -75,9 +75,9 @@ export function FormControl({
   children,
 }: Partial<Props>): VNode {
   const [filled, setFilled] = useState(false);
-  const [focusedState, setFocused] = useState(false);
+  const [focusedState, setFocused] = useState(visuallyFocused);
   const focused =
-    visuallyFocused !== undefined && !disabled ? visuallyFocused : focusedState;
+    focusedState !== undefined && !disabled ? focusedState : false;
 
   const value: FCCProps = {
     color,
@@ -124,7 +124,7 @@ export interface FCCProps {
   // setAdornedStart,
   color: Colors;
   disabled: boolean;
-  error: boolean;
+  error: string | undefined;
   filled: boolean;
   focused: boolean;
   fullWidth: boolean;
@@ -142,7 +142,7 @@ export interface FCCProps {
 const defaultContextValue: FCCProps = {
   color: "primary",
   disabled: false,
-  error: false,
+  error: undefined,
   filled: false,
   focused: false,
   fullWidth: false,
@@ -159,7 +159,7 @@ const defaultContextValue: FCCProps = {
 function withoutUndefinedProperties(obj: any): any {
   return Object.keys(obj).reduce((acc, key) => {
     const _acc: any = acc;
-    if (obj[key] !== undefined) _acc[key] = obj[key];
+    if (obj[key] !== undefined && obj[key] !== false) _acc[key] = obj[key];
     return _acc;
   }, {});
 }

packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx

@@ -43,7 +43,7 @@ const containedStyle = css`
 
 interface Props {
   disabled?: boolean;
-  error?: boolean;
+  error?: string;
   filled?: boolean;
   focused?: boolean;
   margin?: "dense";

packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx

@@ -22,7 +22,7 @@ import { useFormControl } from "./FormControl.js";
 export interface Props {
   class?: string;
   disabled?: boolean;
-  error?: boolean;
+  error?: string;
   filled?: boolean;
   focused?: boolean;
   required?: boolean;
@@ -67,9 +67,9 @@ export function FormLabel({
   });
   return (
     <label
-      data-focused={fcs.focused}
+      data-focused={!fcs.focused ? undefined : true}
       data-error={!fcs.error ? undefined : true}
-      data-disabled={fcs.disabled}
+      data-disabled={!fcs.disabled ? undefined : true}
       class={[_class, root, theme.typography.body1].join(" ")}
       {...rest}
       style={{

packages/taler-wallet-webextension/src/mui/input/InputBase.tsx

@@ -60,8 +60,8 @@ export function InputBaseRoot({
   const fcs = useFormControl({});
   return (
     <div
-      data-disabled={disabled}
+      data-disabled={!disabled ? undefined : true}
-      data-focused={focused}
+      data-focused={!focused ? undefined : true}
       data-multiline={multiline}
       data-hasStart={!!startAdornment}
       data-hasEnd={!!endAdornment}
@@ -116,6 +116,12 @@ const componentStyle = css`
       duration: theme.transitions.duration.shorter,
     })};
   }
+  &:not(focus)::placeholder {
+    opacity: 0;
+  }
+  &:focus::placeholder {
+    opacity: ${theme.palette.mode === "light" ? 0.42 : 0.5};
+  }
   &:focus {
     outline: 0;
   }
@@ -292,11 +298,11 @@ export function InputBase({
     <Root {...fcs} onClick={handleClick}>
       <FormControlContext.Provider value={null}>
         <Input
-          aria-invalid={fcs.error}
+          aria-invalid={fcs.error ? true : undefined}
           // aria-describedby={}
-          disabled={fcs.disabled}
+          disabled={fcs.disabled ? true : undefined}
           name={name}
-          placeholder={placeholder}
+          placeholder={!placeholder ? undefined : placeholder}
           readOnly={readOnly}
           required={fcs.required}
           rows={rows}

packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx

@@ -27,7 +27,7 @@ export interface Props {
   defaultValue?: string;
   disabled?: boolean;
   disableUnderline?: boolean;
-  error?: boolean;
+  error?: string;
   fullWidth?: boolean;
   id?: string;
   margin?: "dense" | "normal" | "none";
@@ -176,7 +176,7 @@ function Root({
   return (
     <InputBaseRoot
       disabled={disabled}
-      focused={focused}
+      focused={focused ? true : undefined}
       fullWidth={fullWidth}
       multiline={multiline}
       error={error}

packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx

@@ -90,7 +90,7 @@ interface InputLabelProps {
   color: Colors;
   disableAnimation: boolean;
   disabled: boolean;
-  error: boolean;
+  error?: string;
   focused: boolean;
   margin: boolean;
   required: boolean;
@@ -104,8 +104,8 @@ export function InputLabel(props: Partial<InputLabelProps>): VNode {
     <FormLabel
       data-form-control={!!fcs}
       data-size={fcs.size}
-      data-shrink={props.shrink || fcs.filled || fcs.focused}
+      data-shrink={props.shrink || fcs.filled || fcs.focused ? true : undefined}
-      data-disable-animation={props.disableAnimation}
+      data-disable-animation={props.disableAnimation ? true : undefined}
       data-variant={fcs.variant}
       class={root}
       {...props}

packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx

@@ -28,7 +28,7 @@ export interface Props {
   disabled?: boolean;
   disableUnderline?: boolean;
   endAdornment?: VNode;
-  error?: boolean;
+  error?: string;
   fullWidth?: boolean;
   id?: string;
   margin?: "dense" | "normal" | "none";
@@ -128,7 +128,7 @@ function Root({ fullWidth, disabled, focused, error, children }: any): VNode {
   return (
     <InputBaseRoot
       disabled={disabled}
-      focused={focused}
+      focused={focused ? true : undefined}
       fullWidth={fullWidth}
       error={error}
       class={[rootStyle, formControlStyle, underlineStyle].join(" ")}

packages/taler-wallet-webextension/src/wallet/ManageAccount/stories.tsx

@@ -194,8 +194,9 @@ export const AddingIbanAccount = createExample(ReadyView, {
         uri: {
           targetType: "iban",
           iban: "ASDQWEQWE",
+          bic: "SANDBOX",
           isKnown: true,
-          targetPath: "/ASDQWEQWE",
+          targetPath: "SANDBOX/ASDQWEQWE",
           params: {},
         },
       },

packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx

@@ -23,7 +23,6 @@ import {
 import { styled } from "@linaria/react";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
-import { ErrorMessage } from "../../components/ErrorMessage.js";
 import { LoadingError } from "../../components/LoadingError.js";
 import { SelectList } from "../../components/SelectList.js";
 import {
@@ -41,6 +40,7 @@ import checkIcon from "../../svg/check_24px.svg";
 import warningIcon from "../../svg/warning_24px.svg";
 import deleteIcon from "../../svg/delete_24px.svg";
 import { State } from "./index.js";
+import { ErrorMessage } from "../../components/ErrorMessage.js";
 
 type AccountType = "bitcoin" | "x-taler-bank" | "iban";
 type ComponentFormByAccountType = {
@@ -143,9 +143,9 @@ export function ReadyView({
             </p>
             <p>
               <TextField
-                label="Account alias"
+                label="Alias"
-                variant="standard"
+                variant="filled"
-                required
+                placeholder="Easy to remember description"
                 fullWidth
                 disabled={accountType.value === ""}
                 value={alias.value}
@@ -201,6 +201,9 @@ function IbanTable({
             <th>
               <i18n.Translate>Alias</i18n.Translate>
             </th>
+            <th>
+              <i18n.Translate>Bank Id</i18n.Translate>
+            </th>
             <th>
               <i18n.Translate>Int. Account Number</i18n.Translate>
             </th>
@@ -219,7 +222,8 @@ function IbanTable({
             return (
               <tr key={account.alias}>
                 <td>{account.alias}</td>
-                <td>{p.targetPath}</td>
+                <td>{p.bic}</td>
+                <td>{p.iban}</td>
                 <td>{p.params["receiver-name"]}</td>
                 <td class="kyc">
                   {account.kyc_completed ? (
@@ -415,7 +419,7 @@ function BitcoinAddressAccount({ field }: { field: TextFieldHandler }): VNode {
         variant="standard"
         fullWidth
         value={value}
-        error={value !== undefined && !!errors?.value}
+        error={value !== undefined ? errors?.value : undefined}
         disabled={!field.onInput}
         onChange={(v) => {
           setValue(v);
@@ -424,9 +428,6 @@ function BitcoinAddressAccount({ field }: { field: TextFieldHandler }): VNode {
           }
         }}
       />
-      {value !== undefined && errors?.value && (
-        <ErrorMessage title={<span>{errors?.value}</span>} />
-      )}
     </Fragment>
   );
 }
@@ -456,7 +457,7 @@ function TalerBankAddressAccount({
         variant="standard"
         fullWidth
         value={host}
-        error={host !== undefined && !!errors?.host}
+        error={host !== undefined ? errors?.host : undefined}
         disabled={!field.onInput}
         onChange={(v) => {
           setHost(v);
@@ -464,77 +465,109 @@ function TalerBankAddressAccount({
             field.onInput(`payto://x-taler-bank/${v}/${account}`);
           }
         }}
-      />{" "}
+      />
-      {host !== undefined && errors?.host && (
-        <ErrorMessage title={<span>{errors?.host}</span>} />
-      )}
       <TextField
         label="Bank account"
         variant="standard"
         fullWidth
         disabled={!field.onInput}
         value={account}
-        error={account !== undefined && !!errors?.account}
+        error={account !== undefined ? errors?.account : undefined}
         onChange={(v) => {
           setAccount(v || "");
           if (!errors && field.onInput) {
             field.onInput(`payto://x-taler-bank/${host}/${v}`);
           }
         }}
-      />{" "}
+      />
-      {account !== undefined && errors?.account && (
-        <ErrorMessage title={<span>{errors?.account}</span>} />
-      )}
     </Fragment>
   );
 }
 
+//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}$/;
+
 function IbanAddressAccount({ field }: { field: TextFieldHandler }): VNode {
   const { i18n } = useTranslationContext();
-  const [number, setNumber] = 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({
-    number: !number ? i18n.str`Can't be empty` : undefined,
+    bic: !bic
+      ? undefined
+      : !bicRegex.test(bic)
+      ? i18n.str`Invalid bic`
+      : undefined,
+    iban: !iban
+      ? i18n.str`Can't be empty`
+      : !ibanRegex.test(iban)
+      ? i18n.str`Invalid iban`
+      : undefined,
     name: !name ? i18n.str`Can't be empty` : undefined,
   });
+
+  function sendUpdateIfNoErrors(
+    bic: string | undefined,
+    iban: string,
+    name: string,
+  ): void {
+    if (!errors && field.onInput) {
+      const path = bic === undefined ? iban : `${bic}/${iban}`;
+      field.onInput(
+        `payto://iban/${path}?receiver-name=${encodeURIComponent(name)}`,
+      );
+    }
+  }
   return (
     <Fragment>
+      <p>
         <TextField
-        label="IBAN number"
+          label="BIC"
-        variant="standard"
+          variant="filled"
+          placeholder="BANKID"
           fullWidth
-        value={number}
+          value={bic}
-        error={number !== undefined && !!errors?.number}
+          error={bic !== undefined ? errors?.bic : undefined}
           disabled={!field.onInput}
           onChange={(v) => {
-          setNumber(v);
+            setBic(v);
-          if (!errors && field.onInput) {
+            sendUpdateIfNoErrors(v, iban || "", name || "");
-            field.onInput(`payto://iban/${v}?receiver-name=${name}`);
-          }
           }}
         />
-      {number !== undefined && errors?.number && (
+      </p>
-        <ErrorMessage title={<span>{errors?.number}</span>} />
+      <p>
-      )}
         <TextField
-        label="Account name"
+          label="IBAN"
-        variant="standard"
+          variant="filled"
+          placeholder="XX123456"
           fullWidth
+          required
+          value={iban}
+          error={iban !== undefined ? errors?.iban : undefined}
+          disabled={!field.onInput}
+          onChange={(v) => {
+            setIban(v);
+            sendUpdateIfNoErrors(bic, v, name || "");
+          }}
+        />
+      </p>
+      <p>
+        <TextField
+          label="Receiver name"
+          variant="filled"
+          placeholder="Name of the target bank account owner"
+          fullWidth
+          required
           value={name}
-        error={name !== undefined && !!errors?.name}
+          error={name !== undefined ? errors?.name : undefined}
           disabled={!field.onInput}
           onChange={(v) => {
             setName(v);
-          if (!errors && field.onInput) {
+            sendUpdateIfNoErrors(bic, iban || "", v);
-            field.onInput(
-              `payto://iban/${number}?receiver-name=${encodeURIComponent(v)}`,
-            );
-          }
           }}
         />
-      {name !== undefined && errors?.name && (
+      </p>
-        <ErrorMessage title={<span>{errors?.name}</span>} />
-      )}
     </Fragment>
   );
 }

packages/taler-wallet-webextension/src/wallet/Transaction.tsx

@@ -1343,7 +1343,7 @@ function DepositDetails({
   const { i18n } = useTranslationContext();
   const r = Amounts.parseOrThrow(transaction.amountRaw);
   const e = Amounts.parseOrThrow(transaction.amountEffective);
-  const fee = Amounts.sub(r, e).amount;
+  const fee = Amounts.sub(e, r).amount;
 
   const maxFrac = [r, e, fee]
     .map((a) => Amounts.maxFractionalDigits(a))
@@ -1366,7 +1366,7 @@ function DepositDetails({
             <i18n.Translate>Transaction fees</i18n.Translate>
           </td>
           <td>
-            <Amount value={fee} negative maxFracSize={maxFrac} />
+            <Amount value={fee} maxFracSize={maxFrac} />
           </td>
         </tr>
       )}