1 files changed, 54 insertions, 45 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx b/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx
index 75e1feca4..fb32e5a59 100644
--- a/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx
@@ -21,18 +21,14 @@ import {
   PaytoUriIBAN,
   PaytoUriTalerBank,
   stringifyPaytoUri,
+  validateIban,
 } from "@gnu-taler/taler-util";
 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,
-  WarningText,
-} from "../../components/styled/index.js";
+import { Input, SubTitle, SvgIcon } from "../../components/styled/index.js";
 import { useTranslationContext } from "../../context/translation.js";
 import { Button } from "../../mui/Button.js";
 import { TextFieldHandler } from "../../mui/handlers.js";
@@ -111,38 +107,47 @@ export function ReadyView({
             description={error}
           />
         )}
-        <p>
-          <Input>
-            <SelectList
-              label={i18n.str`Select account type`}
-              list={accountType.list}
-              name="accountType"
-              value={accountType.value}
-              onChange={accountType.onChange}
+        <div style={{ width: "100%", display: "flex" }}>
+          {Object.entries(accountType.list).map(([key, name], idx) => (
+            <div
+              style={{
+                marginLeft: 8,
+                padding: 8,
+                borderTopLeftRadius: 5,
+                borderTopRightRadius: 5,
+                backgroundColor:
+                  accountType.value === key ? "#0042b2" : "unset",
+                color: accountType.value === key ? "white" : "unset",
+              }}
+              onClick={(e) => {
+                if (accountType.onChange) {
+                  accountType.onChange(key);
+                }
+              }}
+            >
+              {name}
+            </div>
+          ))}
+        </div>
+        <div style={{ border: "1px solid gray", padding: 8, borderRadius: 5 }}>
+          <p>
+            <CustomFieldByAccountType
+              type={accountType.value as AccountType}
+              field={uri}
             />
-          </Input>
+          </p>
+        </div>
+        <p>
+          <TextField
+            label="Alias"
+            variant="filled"
+            placeholder="Easy to remember description"
+            fullWidth
+            disabled={accountType.value === ""}
+            value={alias.value}
+            onChange={alias.onInput}
+          />
         </p>
-        {accountType.value === "" ? undefined : (
-          <Fragment>
-            <p>
-              <CustomFieldByAccountType
-                type={accountType.value as AccountType}
-                field={uri}
-              />
-            </p>
-            <p>
-              <TextField
-                label="Alias"
-                variant="filled"
-                placeholder="Easy to remember description"
-                fullWidth
-                disabled={accountType.value === ""}
-                value={alias.value}
-                onChange={alias.onInput}
-              />
-            </p>
-          </Fragment>
-        )}
       </section>
       <section>
         <Button
@@ -403,6 +408,9 @@ function BitcoinAddressAccount({ field }: { field: TextFieldHandler }): VNode {
   });
   return (
     <Fragment>
+      <h3>
+        <i18n.Translate>Bitcoin Account</i18n.Translate>
+      </h3>
       <TextField
         label="Bitcoin address"
         variant="standard"
@@ -442,6 +450,9 @@ function TalerBankAddressAccount({
   });
   return (
     <Fragment>
+      <h3>
+        <i18n.Translate>Taler Bank</i18n.Translate>
+      </h3>
       <TextField
         label="Bank host"
         variant="standard"
@@ -493,7 +504,7 @@ function IbanAddressAccount({ field }: { field: TextFieldHandler }): VNode {
       : undefined,
     iban: !iban
       ? i18n.str`Can't be empty`
-      : !ibanRegex.test(iban)
+      : validateIban(iban).type === "invalid"
       ? i18n.str`Invalid iban`
       : undefined,
     name: !name ? i18n.str`Can't be empty` : undefined,
@@ -512,7 +523,10 @@ function IbanAddressAccount({ field }: { field: TextFieldHandler }): VNode {
   }
   return (
     <Fragment>
-      <p>
+      <h3>
+        <i18n.Translate>International Bank Account Number</i18n.Translate>
+      </h3>
+      {/* <p>
         <TextField
           label="BIC"
           variant="filled"
@@ -526,7 +540,7 @@ function IbanAddressAccount({ field }: { field: TextFieldHandler }): VNode {
             sendUpdateIfNoErrors(v, iban || "", name || "");
           }}
         />
-      </p>
+      </p> */}
       <p>
         <TextField
           label="IBAN"
@@ -545,7 +559,7 @@ function IbanAddressAccount({ field }: { field: TextFieldHandler }): VNode {
       </p>
       <p>
         <TextField
-          label="Receiver name"
+          label="Account name"
           variant="filled"
           placeholder="Name of the target bank account owner"
           fullWidth
@@ -576,11 +590,6 @@ function CustomFieldByAccountType({
 
   return (
     <div>
-      <WarningText>
-        <i18n.Translate>
-          We can not validate the account so make sure the value is correct.
-        </i18n.Translate>
-      </WarningText>
       <AccountForm field={field} />
     </div>
   );