2 files changed, 15 insertions, 17 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts b/packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts
index 176a8d100..f7383d483 100644
--- a/packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts
+++ b/packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts
@@ -21,7 +21,7 @@ import {
 } from "@gnu-taler/taler-util";
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { useState } from "preact/hooks";
-import { alertFromError } from "../../context/alert.js";
+import { alertFromError, useAlertContext } from "../../context/alert.js";
 import { useBackendContext } from "../../context/backend.js";
 import { useTranslationContext } from "../../context/translation.js";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
@@ -33,6 +33,7 @@ export function useComponentState({
   onCancel,
 }: Props): State {
   const api = useBackendContext();
+  const { pushAlertOnError } = useAlertContext();
   const { i18n } = useTranslationContext();
   const hook = useAsyncAsHook(() =>
     api.wallet.call(WalletApiOperation.ListKnownBankAccounts, { currency }),
@@ -109,30 +110,30 @@ export function useComponentState({
     accountType: {
       list: accountType,
       value: type,
-      onChange: async (v) => {
+      onChange: pushAlertOnError(async (v) => {
         setType(v);
-      },
+      }),
     },
     alias: {
       value: alias,
-      onInput: async (v) => {
+      onInput: pushAlertOnError(async (v) => {
         setAlias(v);
-      },
+      }),
     },
     uri: {
       value: payto,
       error: paytoUriError,
-      onInput: async (v) => {
+      onInput: pushAlertOnError(async (v) => {
         setPayto(v);
-      },
+      }),
     },
     accountByType,
     deleteAccount,
     onAccountAdded: {
-      onClick: unableToAdd ? undefined : addAccount,
+      onClick: unableToAdd ? undefined : pushAlertOnError(addAccount),
     },
     onCancel: {
-      onClick: async () => onCancel(),
+      onClick: pushAlertOnError(async () => onCancel()),
     },
   };
 }
diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/stories.tsx b/packages/taler-wallet-webextension/src/wallet/ManageAccount/stories.tsx
index ca6db8be9..e20d4e0e8 100644
--- a/packages/taler-wallet-webextension/src/wallet/ManageAccount/stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ManageAccount/stories.tsx
@@ -19,18 +19,15 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { createExample } from "../../test-utils.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
+import { nullFunction } from "../../mui/handlers.js";
 import { ReadyView } from "./views.js";
 
 export default {
   title: "manage account",
 };
 
-const nullFunction = async () => {
-  null;
-};
-
-export const JustTwoBitcoinAccounts = createExample(ReadyView, {
+export const JustTwoBitcoinAccounts = tests.createExample(ReadyView, {
   status: "ready",
   currency: "ARS",
   accountType: {
@@ -84,7 +81,7 @@ export const JustTwoBitcoinAccounts = createExample(ReadyView, {
   onCancel: {},
 });
 
-export const WithAllTypeOfAccounts = createExample(ReadyView, {
+export const WithAllTypeOfAccounts = tests.createExample(ReadyView, {
   status: "ready",
   currency: "ARS",
   accountType: {
@@ -165,7 +162,7 @@ export const WithAllTypeOfAccounts = createExample(ReadyView, {
   onCancel: {},
 });
 
-export const AddingIbanAccount = createExample(ReadyView, {
+export const AddingIbanAccount = tests.createExample(ReadyView, {
   status: "ready",
   currency: "ARS",
   accountType: {