showing error field when there is not account yet

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

@@ -68,7 +68,7 @@ export function FormLabel({
   return (
     <label
       data-focused={fcs.focused}
-      data-error={fcs.error}
+      data-error={!fcs.error ? undefined : true}
       data-disabled={fcs.disabled}
       class={[_class, root, theme.typography.body1].join(" ")}
       {...rest}
@@ -77,7 +77,9 @@ export function FormLabel({
       }}
     >
       {children}
-      {fcs.required && <span data-error={fcs.error}>&thinsp;{"*"}</span>}
+      {fcs.required && (
+        <span data-error={!fcs.error ? undefined : true}>&thinsp;{"*"}</span>
+      )}
     </label>
   );
 }

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

@@ -65,7 +65,7 @@ export function InputBaseRoot({
       data-multiline={multiline}
       data-hasStart={!!startAdornment}
       data-hasEnd={!!endAdornment}
-      data-error={error}
+      data-error={!error ? undefined : true}
       class={[
         _class,
         rootStyle,

packages/taler-wallet-webextension/src/wallet/AddAccount/state.ts

@@ -67,15 +67,11 @@ export function useComponentState(
   }
 
   const paytoUriError =
-    payto === ""
+    found
-      ? undefined
+      ? "that account is already present"
-      : !uri
+      : undefined;
-        ? "the uri is not ok"
-        : found
-          ? "that account is already present"
-          : undefined;
 
-  const unableToAdd = !type || !alias || paytoUriError;
+  const unableToAdd = !type || !alias || !!paytoUriError || !uri;
 
   return {
     status: "ready",

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

@@ -105,7 +105,11 @@ export function ReadyView({
         >
           <i18n.Translate>Cancel</i18n.Translate>
         </Button>
-        <Button variant="contained" onClick={onAccountAdded.onClick}>
+        <Button
+          variant="contained"
+          onClick={onAccountAdded.onClick}
+          disabled={!onAccountAdded.onClick}
+        >
           <i18n.Translate>Add</i18n.Translate>
         </Button>
       </footer>
@@ -113,6 +117,118 @@ export function ReadyView({
   );
 }
 
+function BitcoinAddressAccount({ field }: { field: TextFieldHandler }): VNode {
+  const { i18n } = useTranslationContext();
+  const [value, setValue] = useState<string | undefined>(undefined);
+  const errors = undefinedIfEmpty({
+    value: !value ? i18n.str`Can't be empty` : undefined,
+  });
+  return (
+    <Fragment>
+      <TextField
+        label="Bitcoin address"
+        variant="standard"
+        fullWidth
+        value={value}
+        error={value !== undefined && !!errors?.value}
+        onChange={(v) => {
+          setValue(v);
+          if (!errors) {
+            field.onInput(`payto://bitcoin/${value}`);
+          }
+        }}
+      />
+      {value !== undefined && errors?.value && (
+        <ErrorMessage title={<span>{errors?.value}</span>} />
+      )}
+    </Fragment>
+  );
+}
+
+function undefinedIfEmpty<T extends object>(obj: T): T | undefined {
+  return Object.keys(obj).some((k) => (obj as any)[k] !== undefined)
+    ? obj
+    : undefined;
+}
+
+function TalerBankAddressAccount({
+  field,
+}: {
+  field: TextFieldHandler;
+}): VNode {
+  const { i18n } = useTranslationContext();
+  const [host, setHost] = useState<string | undefined>(undefined);
+  const [account, setAccount] = useState<string | undefined>(undefined);
+  const errors = undefinedIfEmpty({
+    host: !host ? i18n.str`Can't be empty` : undefined,
+    account: !account ? i18n.str`Can't be empty` : undefined,
+  });
+  return (
+    <Fragment>
+      <TextField
+        label="Bank host"
+        variant="standard"
+        fullWidth
+        value={host}
+        error={host !== undefined && !!errors?.host}
+        onChange={(v) => {
+          setHost(v);
+          if (!errors) {
+            field.onInput(`payto://x-taler-bank/${host}/${account}`);
+          }
+        }}
+      />{" "}
+      {host !== undefined && errors?.host && (
+        <ErrorMessage title={<span>{errors?.host}</span>} />
+      )}
+      <TextField
+        label="Bank account"
+        variant="standard"
+        fullWidth
+        value={account}
+        error={account !== undefined && !!errors?.account}
+        onChange={(v) => {
+          setAccount(v || "");
+          if (!errors) {
+            field.onInput(`payto://x-taler-bank/${host}/${account}`);
+          }
+        }}
+      />{" "}
+      {account !== undefined && errors?.account && (
+        <ErrorMessage title={<span>{errors?.account}</span>} />
+      )}
+    </Fragment>
+  );
+}
+
+function IbanAddressAccount({ field }: { field: TextFieldHandler }): VNode {
+  const { i18n } = useTranslationContext();
+  const [value, setValue] = useState<string | undefined>(undefined);
+  const errors = undefinedIfEmpty({
+    value: !value ? i18n.str`Can't be empty` : undefined,
+  });
+  return (
+    <Fragment>
+      <TextField
+        label="IBAN number"
+        variant="standard"
+        fullWidth
+        value={value}
+        error={value !== undefined && !!errors?.value}
+        onChange={(v) => {
+          setValue(v);
+          if (!errors) {
+            field.onInput(`payto://iba/${value}`);
+          }
+        }}
+      />
+      {value !== undefined && errors?.value && (
+        <ErrorMessage title={<span>{errors?.value}</span>} />
+      )}
+    </Fragment>
+  );
+}
+
 function CustomFieldByAccountType({
   type,
   field,
@@ -120,84 +236,14 @@ function CustomFieldByAccountType({
   type: string;
   field: TextFieldHandler;
 }): VNode {
-  const p = parsePaytoUri(field.value);
-  const parts = !p ? [] : p.targetPath.split("/");
-  const initialPart1 = parts.length > 0 ? parts[0] : "";
-  const initialPart2 = parts.length > 1 ? parts[1] : "";
-  const [part1, setPart1] = useState(initialPart1);
-  const [part2, setPart2] = useState(initialPart2);
-  function updateField(): void {
-    if (part1 && part2) {
-      field.onInput(`payto://${type}/${part1}/${part2}`);
-    } else {
-      if (part1) field.onInput(`payto://${type}/${part1}`);
-    }
-  }
-
   if (type === "bitcoin") {
-    return (
+    return <BitcoinAddressAccount field={field} />;
-      <Fragment>
-        {field.error && <ErrorMessage title={<span>{field.error}</span>} />}
-        <TextField
-          label="Bitcoin address"
-          variant="standard"
-          required
-          fullWidth
-          value={part1}
-          onChange={(v) => {
-            setPart1(v);
-            updateField();
-          }}
-        />
-      </Fragment>
-    );
   }
   if (type === "x-taler-bank") {
-    return (
+    return <TalerBankAddressAccount field={field} />;
-      <Fragment>
-        {field.error && <ErrorMessage title={<span>{field.error}</span>} />}
-        <TextField
-          label="Bank host"
-          variant="standard"
-          required
-          fullWidth
-          value={part1}
-          onChange={(v) => {
-            setPart1(v);
-            updateField();
-          }}
-        />{" "}
-        <TextField
-          label="Bank account"
-          variant="standard"
-          required
-          fullWidth
-          value={part2}
-          onChange={(v) => {
-            setPart2(v);
-            updateField();
-          }}
-        />
-      </Fragment>
-    );
   }
   if (type === "iban") {
-    return (
+    return <IbanAddressAccount field={field} />;
-      <Fragment>
-        {field.error && <ErrorMessage title={<span>{field.error}</span>} />}
-        <TextField
-          label="IBAN number"
-          variant="standard"
-          required
-          fullWidth
-          value={part1}
-          onChange={(v) => {
-            setPart1(v);
-            updateField();
-          }}
-        />
-      </Fragment>
-    );
   }
   return <Fragment />;
 }

packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts

@@ -178,12 +178,11 @@ export function useComponentState(
         : undefined;
 
   const unableToDeposit =
-    !parsedAmount ||
+    !parsedAmount || //no amount specified
-    selectedAccount === undefined ||
+    selectedAccount === undefined || //no account selected
-    Amounts.isZero(totalToDeposit) ||
+    Amounts.isZero(totalToDeposit) || //deposit may be zero because of fee
-    fee === undefined ||
+    fee === undefined || //no fee calculated yet
-    amountError !== undefined;
+    amountError !== undefined; //amount field may be invalid
-  // console.log(parsedAmount, selectedAccount, fee, totalToDeposit, amountError)
 
   async function doSend(): Promise<void> {
     if (!selectedAccount || !parsedAmount || !currency) return;