manage account instead of add account

5 files changed, 977 insertions, 0 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/index.ts b/packages/taler-wallet-webextension/src/wallet/ManageAccount/index.ts
new file mode 100644
index 000000000..cd591be74
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/wallet/ManageAccount/index.ts
@@ -0,0 +1,80 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { KnownBankAccountsInfo } from "@gnu-taler/taler-util";
+import { Loading } from "../../components/Loading.js";
+import { HookError } from "../../hooks/useAsyncAsHook.js";
+import {
+  ButtonHandler,
+  SelectFieldHandler,
+  TextFieldHandler
+} from "../../mui/handlers.js";
+import { compose, StateViewMap } from "../../utils/index.js";
+import { wxApi } from "../../wxApi.js";
+import { useComponentState } from "./state.js";
+import { LoadingUriView, ReadyView } from "./views.js";
+
+export interface Props {
+  currency: string;
+  onAccountAdded: (uri: string) => void;
+  onCancel: () => void;
+}
+
+export type State = State.Loading | State.LoadingUriError | State.Ready;
+
+export namespace State {
+  export interface Loading {
+    status: "loading";
+    error: undefined;
+  }
+
+  export interface LoadingUriError {
+    status: "loading-error";
+    error: HookError;
+  }
+
+  export interface BaseInfo {
+    error: undefined;
+  }
+  export interface Ready extends BaseInfo {
+    status: "ready";
+    error: undefined;
+    currency: string;
+    accountType: SelectFieldHandler;
+    uri: TextFieldHandler;
+    alias: TextFieldHandler;
+    onAccountAdded: ButtonHandler;
+    onCancel: ButtonHandler;
+    accountByType: AccountByType,
+    deleteAccount: (a: KnownBankAccountsInfo) => Promise<void>,
+  }
+}
+
+export type AccountByType = {
+  [key: string]: KnownBankAccountsInfo[]
+};
+
+const viewMapping: StateViewMap<State> = {
+  loading: Loading,
+  "loading-error": LoadingUriView,
+  ready: ReadyView,
+};
+
+export const ManageAccountPage = compose(
+  "ManageAccountPage",
+  (p: Props) => useComponentState(p, wxApi),
+  viewMapping,
+);
diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts b/packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts
new file mode 100644
index 000000000..ad8643133
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts
@@ -0,0 +1,127 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { KnownBankAccountsInfo, parsePaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util";
+import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
+import { useState } from "preact/hooks";
+import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
+import { wxApi } from "../../wxApi.js";
+import { AccountByType, Props, State } from "./index.js";
+
+export function useComponentState(
+  { currency, onAccountAdded, onCancel }: Props,
+  api: typeof wxApi,
+): State {
+  const hook = useAsyncAsHook(() => api.wallet.call(WalletApiOperation.ListKnownBankAccounts, { currency }));
+
+  const [payto, setPayto] = useState("");
+  const [alias, setAlias] = useState("");
+  const [type, setType] = useState("");
+
+  if (!hook) {
+    return {
+      status: "loading",
+      error: undefined,
+    };
+  }
+  if (hook.hasError) {
+    return {
+      status: "loading-error",
+      error: hook,
+    };
+  }
+
+  const accountType: Record<string, string> = {
+    "": "Choose one account type",
+    iban: "IBAN",
+    // bitcoin: "Bitcoin",
+    // "x-taler-bank": "Taler Bank",
+  };
+  const uri = parsePaytoUri(payto);
+  const found =
+    hook.response.accounts.findIndex(
+      (a) => stringifyPaytoUri(a.uri) === payto,
+    ) !== -1;
+
+  async function addAccount(): Promise<void> {
+    if (!uri || found) return;
+
+    const normalizedPayto = stringifyPaytoUri(uri);
+    await api.wallet.call(WalletApiOperation.AddKnownBankAccounts, {
+      alias, currency, payto: normalizedPayto
+    });
+    onAccountAdded(payto);
+  }
+
+  const paytoUriError =
+    found
+      ? "that account is already present"
+      : undefined;
+
+  const unableToAdd = !type || !alias || !!paytoUriError || !uri;
+
+  const accountByType: AccountByType = {
+    iban: [],
+    bitcoin: [],
+    "x-taler-bank": [],
+  }
+
+  hook.response.accounts.forEach(acc => {
+    accountByType[acc.uri.targetType].push(acc)
+  });
+
+  async function deleteAccount(account: KnownBankAccountsInfo): Promise<void> {
+    const payto = stringifyPaytoUri(account.uri);
+    await api.wallet.call(WalletApiOperation.ForgetKnownBankAccounts, {
+      payto
+    })
+    hook?.retry()
+  }
+
+  return {
+    status: "ready",
+    error: undefined,
+    currency,
+    accountType: {
+      list: accountType,
+      value: type,
+      onChange: async (v) => {
+        setType(v);
+      },
+    },
+    alias: {
+      value: alias,
+      onInput: async (v) => {
+        setAlias(v);
+      },
+    },
+    uri: {
+      value: payto,
+      error: paytoUriError,
+      onInput: async (v) => {
+        setPayto(v);
+      },
+    },
+    accountByType,
+    deleteAccount,
+    onAccountAdded: {
+      onClick: unableToAdd ? undefined : addAccount,
+    },
+    onCancel: {
+      onClick: async () => onCancel(),
+    },
+  };
+}
diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/stories.tsx b/packages/taler-wallet-webextension/src/wallet/ManageAccount/stories.tsx
new file mode 100644
index 000000000..c0d3a38b0
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/wallet/ManageAccount/stories.tsx
@@ -0,0 +1,208 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { createExample } from "../../test-utils.js";
+import { ReadyView } from "./views.js";
+
+export default {
+  title: "wallet/manage account",
+};
+
+const nullFunction = async () => {
+  null;
+};
+
+export const JustTwoBitcoinAccounts = createExample(ReadyView, {
+  status: "ready",
+  currency: "ARS",
+  accountType: {
+    list: {
+      "": "Choose one account type",
+      iban: "IBAN",
+      // bitcoin: "Bitcoin",
+      // "x-taler-bank": "Taler Bank",
+    },
+    value: "",
+  },
+  alias: {
+    value: "",
+    onInput: nullFunction,
+  },
+  uri: {
+    value: "",
+    onInput: nullFunction,
+  },
+  accountByType: {
+    iban: [],
+    "x-taler-bank": [],
+    bitcoin: [
+      {
+        alias: "my bitcoin addr",
+        currency: "BTC",
+        kyc_completed: false,
+        uri: {
+          targetType: "bitcoin",
+          segwitAddrs: [],
+          isKnown: true,
+          targetPath: "bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh",
+          params: {},
+        },
+      },
+      {
+        alias: "my other addr",
+        currency: "BTC",
+        kyc_completed: true,
+        uri: {
+          targetType: "bitcoin",
+          segwitAddrs: [],
+          isKnown: true,
+          targetPath: "bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh",
+          params: {},
+        },
+      },
+    ],
+  },
+  onAccountAdded: {},
+  onCancel: {},
+});
+
+export const WithAllTypeOfAccounts = createExample(ReadyView, {
+  status: "ready",
+  currency: "ARS",
+  accountType: {
+    list: {
+      "": "Choose one account type",
+      iban: "IBAN",
+      // bitcoin: "Bitcoin",
+      // "x-taler-bank": "Taler Bank",
+    },
+    value: "",
+  },
+  alias: {
+    value: "",
+    onInput: nullFunction,
+  },
+  uri: {
+    value: "",
+    onInput: nullFunction,
+  },
+  accountByType: {
+    iban: [
+      {
+        alias: "my bank",
+        currency: "ARS",
+        kyc_completed: true,
+        uri: {
+          targetType: "iban",
+          iban: "ASDQWEQWE",
+          isKnown: true,
+          targetPath: "/ASDQWEQWE",
+          params: {},
+        },
+      },
+    ],
+    "x-taler-bank": [
+      {
+        alias: "my xtaler bank",
+        currency: "ARS",
+        kyc_completed: true,
+        uri: {
+          targetType: "x-taler-bank",
+          host: "localhost",
+          account: "123",
+          isKnown: true,
+          targetPath: "localhost/123",
+          params: {},
+        },
+      },
+    ],
+    bitcoin: [
+      {
+        alias: "my bitcoin addr",
+        currency: "BTC",
+        kyc_completed: false,
+        uri: {
+          targetType: "bitcoin",
+          segwitAddrs: [],
+          isKnown: true,
+          targetPath: "bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh",
+          params: {},
+        },
+      },
+      {
+        alias: "my other addr",
+        currency: "BTC",
+        kyc_completed: true,
+        uri: {
+          targetType: "bitcoin",
+          segwitAddrs: [],
+          isKnown: true,
+          targetPath: "bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh",
+          params: {},
+        },
+      },
+    ],
+  },
+  onAccountAdded: {},
+  onCancel: {},
+});
+
+export const AddingIbanAccount = createExample(ReadyView, {
+  status: "ready",
+  currency: "ARS",
+  accountType: {
+    list: {
+      "": "Choose one account type",
+      iban: "IBAN",
+      // bitcoin: "Bitcoin",
+      // "x-taler-bank": "Taler Bank",
+    },
+    value: "iban",
+  },
+  alias: {
+    value: "",
+    onInput: nullFunction,
+  },
+  uri: {
+    value: "",
+    onInput: nullFunction,
+  },
+  accountByType: {
+    iban: [
+      {
+        alias: "my bank",
+        currency: "ARS",
+        kyc_completed: true,
+        uri: {
+          targetType: "iban",
+          iban: "ASDQWEQWE",
+          isKnown: true,
+          targetPath: "/ASDQWEQWE",
+          params: {},
+        },
+      },
+    ],
+    "x-taler-bank": [],
+    bitcoin: [],
+  },
+  onAccountAdded: {},
+  onCancel: {},
+});
diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/test.ts b/packages/taler-wallet-webextension/src/wallet/ManageAccount/test.ts
new file mode 100644
index 000000000..eae4d4ca2
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/wallet/ManageAccount/test.ts
@@ -0,0 +1,28 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { expect } from "chai";
+
+describe("test description", () => {
+  it("should assert", () => {
+    expect([]).deep.equals([]);
+  });
+});
diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx b/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx
new file mode 100644
index 000000000..9bb9e5814
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx
@@ -0,0 +1,534 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import {
+  KnownBankAccountsInfo,
+  PaytoUriBitcoin,
+  PaytoUriIBAN,
+  PaytoUriTalerBank,
+} 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 { LoadingError } from "../../components/LoadingError.js";
+import { SelectList } from "../../components/SelectList.js";
+import {
+  Input,
+  LightText,
+  SubTitle,
+  SvgIcon,
+  WarningText,
+} from "../../components/styled/index.js";
+import { useTranslationContext } from "../../context/translation.js";
+import { Button } from "../../mui/Button.js";
+import { TextFieldHandler } from "../../mui/handlers.js";
+import { TextField } from "../../mui/TextField.js";
+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";
+
+type AccountType = "bitcoin" | "x-taler-bank" | "iban";
+type ComponentFormByAccountType = {
+  [type in AccountType]: (props: { field: TextFieldHandler }) => VNode;
+};
+
+type ComponentListByAccountType = {
+  [type in AccountType]: (props: {
+    list: KnownBankAccountsInfo[];
+    onDelete: (a: KnownBankAccountsInfo) => Promise<void>;
+  }) => VNode;
+};
+
+const formComponentByAccountType: ComponentFormByAccountType = {
+  iban: IbanAddressAccount,
+  bitcoin: BitcoinAddressAccount,
+  "x-taler-bank": TalerBankAddressAccount,
+};
+const tableComponentByAccountType: ComponentListByAccountType = {
+  iban: IbanTable,
+  bitcoin: BitcoinTable,
+  "x-taler-bank": TalerBankTable,
+};
+
+const AccountTable = styled.table`
+  width: 100%;
+
+  border-collapse: separate;
+  border-spacing: 0px 10px;
+  tbody tr:nth-child(odd) > td:not(.actions, .kyc) {
+    background-color: lightgrey;
+  }
+  .actions,
+  .kyc {
+    width: 10px;
+    background-color: inherit;
+  }
+`;
+
+export function LoadingUriView({ error }: State.LoadingUriError): VNode {
+  const { i18n } = useTranslationContext();
+
+  return (
+    <LoadingError
+      title={<i18n.Translate>Could not load</i18n.Translate>}
+      error={error}
+    />
+  );
+}
+
+export function ReadyView({
+  currency,
+  error,
+  accountType,
+  accountByType,
+  alias,
+  onAccountAdded,
+  deleteAccount,
+  onCancel,
+  uri,
+}: State.Ready): VNode {
+  const { i18n } = useTranslationContext();
+
+  return (
+    <Fragment>
+      <section>
+        <SubTitle>
+          <i18n.Translate>Known accounts for {currency}</i18n.Translate>
+        </SubTitle>
+        <p>
+          <i18n.Translate>
+            To add a new account first select the account type.
+          </i18n.Translate>
+        </p>
+
+        {error && (
+          <ErrorMessage
+            title={<i18n.Translate>Unable add this account</i18n.Translate>}
+            description={error}
+          />
+        )}
+        <p>
+          <Input>
+            <SelectList
+              label={<i18n.Translate>Select account type</i18n.Translate>}
+              list={accountType.list}
+              name="accountType"
+              value={accountType.value}
+              onChange={accountType.onChange}
+            />
+          </Input>
+        </p>
+        {accountType.value === "" ? undefined : (
+          <Fragment>
+            <p>
+              <CustomFieldByAccountType
+                type={accountType.value as AccountType}
+                field={uri}
+              />
+            </p>
+            <p>
+              <TextField
+                label="Account alias"
+                variant="standard"
+                required
+                fullWidth
+                disabled={accountType.value === ""}
+                value={alias.value}
+                onChange={alias.onInput}
+              />
+            </p>
+          </Fragment>
+        )}
+      </section>
+      <section>
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={onCancel.onClick}
+        >
+          <i18n.Translate>Cancel</i18n.Translate>
+        </Button>
+        <Button
+          variant="contained"
+          onClick={onAccountAdded.onClick}
+          disabled={!onAccountAdded.onClick}
+        >
+          <i18n.Translate>Add</i18n.Translate>
+        </Button>
+      </section>
+      <section>
+        {Object.entries(accountByType).map(([type, list]) => {
+          const Table = tableComponentByAccountType[type as AccountType];
+          return <Table key={type} list={list} onDelete={deleteAccount} />;
+        })}
+      </section>
+    </Fragment>
+  );
+}
+
+function IbanTable({
+  list,
+  onDelete,
+}: {
+  list: KnownBankAccountsInfo[];
+  onDelete: (ac: KnownBankAccountsInfo) => void;
+}): VNode {
+  const { i18n } = useTranslationContext();
+  if (list.length === 0) return <Fragment />;
+  return (
+    <div>
+      <h1>
+        <i18n.Translate>IBAN accounts</i18n.Translate>
+      </h1>
+      <AccountTable>
+        <thead>
+          <tr>
+            <th>
+              <i18n.Translate>Alias</i18n.Translate>
+            </th>
+            <th>
+              <i18n.Translate>Int. Account Number</i18n.Translate>
+            </th>
+            <th class="kyc">
+              <i18n.Translate>KYC</i18n.Translate>
+            </th>
+            <th class="actions"></th>
+          </tr>
+        </thead>
+        <tbody>
+          {list.map((account) => {
+            const p = account.uri as PaytoUriIBAN;
+            return (
+              <tr key={account.alias}>
+                <td>{account.alias}</td>
+                <td>{p.targetPath}</td>
+                <td class="kyc">
+                  {account.kyc_completed ? (
+                    <SvgIcon
+                      title={i18n.str`KYC done`}
+                      dangerouslySetInnerHTML={{ __html: checkIcon }}
+                      color="green"
+                    />
+                  ) : (
+                    <SvgIcon
+                      title={i18n.str`KYC missing`}
+                      dangerouslySetInnerHTML={{ __html: warningIcon }}
+                      color="orange"
+                    />
+                  )}
+                </td>
+                <td class="actions">
+                  <Button
+                    variant="outlined"
+                    startIcon={deleteIcon}
+                    size="small"
+                    onClick={async () => onDelete(account)}
+                    color="error"
+                  >
+                    Forget
+                  </Button>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </AccountTable>
+    </div>
+  );
+}
+
+function TalerBankTable({
+  list,
+  onDelete,
+}: {
+  list: KnownBankAccountsInfo[];
+  onDelete: (ac: KnownBankAccountsInfo) => void;
+}): VNode {
+  const { i18n } = useTranslationContext();
+  if (list.length === 0) return <Fragment />;
+  return (
+    <div>
+      <h1>
+        <i18n.Translate>Taler accounts</i18n.Translate>
+      </h1>
+      <AccountTable>
+        <thead>
+          <tr>
+            <th>
+              <i18n.Translate>Alias</i18n.Translate>
+            </th>
+            <th>
+              <i18n.Translate>Host</i18n.Translate>
+            </th>
+            <th>
+              <i18n.Translate>Account</i18n.Translate>
+            </th>
+            <th class="kyc">
+              <i18n.Translate>KYC</i18n.Translate>
+            </th>
+            <th class="actions"></th>
+          </tr>
+        </thead>
+        <tbody>
+          {list.map((account) => {
+            const p = account.uri as PaytoUriTalerBank;
+            return (
+              <tr key={account.alias}>
+                <td>{account.alias}</td>
+                <td>{p.host}</td>
+                <td>{p.account}</td>
+                <td class="kyc">
+                  {account.kyc_completed ? (
+                    <SvgIcon
+                      title={i18n.str`KYC done`}
+                      dangerouslySetInnerHTML={{ __html: checkIcon }}
+                      color="green"
+                    />
+                  ) : (
+                    <SvgIcon
+                      title={i18n.str`KYC missing`}
+                      dangerouslySetInnerHTML={{ __html: warningIcon }}
+                      color="orange"
+                    />
+                  )}
+                </td>
+                <td class="actions">
+                  <Button
+                    variant="outlined"
+                    startIcon={deleteIcon}
+                    size="small"
+                    onClick={async () => onDelete(account)}
+                    color="error"
+                  >
+                    Forget
+                  </Button>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </AccountTable>
+    </div>
+  );
+}
+
+function BitcoinTable({
+  list,
+  onDelete,
+}: {
+  list: KnownBankAccountsInfo[];
+  onDelete: (ac: KnownBankAccountsInfo) => void;
+}): VNode {
+  const { i18n } = useTranslationContext();
+  if (list.length === 0) return <Fragment />;
+  return (
+    <div>
+      <h2>
+        <i18n.Translate>Bitcoin accounts</i18n.Translate>
+      </h2>
+      <AccountTable>
+        <thead>
+          <tr>
+            <th>
+              <i18n.Translate>Alias</i18n.Translate>
+            </th>
+            <th>
+              <i18n.Translate>Address</i18n.Translate>
+            </th>
+            <th class="kyc">
+              <i18n.Translate>KYC</i18n.Translate>
+            </th>
+            <th class="actions"></th>
+          </tr>
+        </thead>
+        <tbody>
+          {list.map((account) => {
+            const p = account.uri as PaytoUriBitcoin;
+            return (
+              <tr key={account.alias}>
+                <td>{account.alias}</td>
+                <td>{p.targetPath}</td>
+                <td class="kyc">
+                  {account.kyc_completed ? (
+                    <SvgIcon
+                      title={i18n.str`KYC done`}
+                      dangerouslySetInnerHTML={{ __html: checkIcon }}
+                      color="green"
+                    />
+                  ) : (
+                    <SvgIcon
+                      title={i18n.str`KYC missing`}
+                      dangerouslySetInnerHTML={{ __html: warningIcon }}
+                      color="orange"
+                    />
+                  )}
+                </td>
+                <td class="actions">
+                  <Button
+                    variant="outlined"
+                    startIcon={deleteIcon}
+                    size="small"
+                    onClick={async () => onDelete(account)}
+                    color="error"
+                  >
+                    Forget
+                  </Button>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </AccountTable>
+    </div>
+  );
+}
+
+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/${v}`);
+          }
+        }}
+      />
+      {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/${v}/${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}/${v}`);
+          }
+        }}
+      />{" "}
+      {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://iban/${v}`);
+          }
+        }}
+      />
+      {value !== undefined && errors?.value && (
+        <ErrorMessage title={<span>{errors?.value}</span>} />
+      )}
+    </Fragment>
+  );
+}
+
+function CustomFieldByAccountType({
+  type,
+  field,
+}: {
+  type: AccountType;
+  field: TextFieldHandler;
+}): VNode {
+  const { i18n } = useTranslationContext();
+
+  const AccountForm = formComponentByAccountType[type];
+
+  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>
+  );
+}