fix #7153: more error handling

if handler do not trap error then fail at compile time,
all safe handlers push alert on error
errors are typed so they render good information

4 files changed, 24 insertions, 30 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/index.ts b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/index.ts
index 4ec4c0ffe..e0b79e060 100644
--- a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/index.ts
+++ b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/index.ts
@@ -53,7 +53,7 @@ export namespace State {
 
   export interface ConfirmProvider {
     status: "confirm-provider";
-    error: undefined | TalerErrorDetail;
+    error: undefined;
     url: string;
     provider: SyncTermsOfServiceResponse;
     tos: ToggleHandler;
diff --git a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/state.ts b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/state.ts
index 1b30ed0cd..cf35abac7 100644
--- a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/state.ts
+++ b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/state.ts
@@ -14,16 +14,13 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import {
-  canonicalizeBaseUrl,
-  Codec,
-  TalerErrorDetail,
-} from "@gnu-taler/taler-util";
+import { canonicalizeBaseUrl, Codec } from "@gnu-taler/taler-util";
 import {
   codecForSyncTermsOfServiceResponse,
   WalletApiOperation,
 } from "@gnu-taler/taler-wallet-core";
 import { useEffect, useState } from "preact/hooks";
+import { useAlertContext } from "../../context/alert.js";
 import { useBackendContext } from "../../context/backend.js";
 import { assertUnreachable } from "../../utils/index.js";
 import { Props, State } from "./index.js";
@@ -152,17 +149,15 @@ export function useComponentState({
   const [url, setHost] = useState<string | undefined>();
   const [name, setName] = useState<string | undefined>();
   const [tos, setTos] = useState(false);
+  const { pushAlertOnError } = useAlertContext();
   const urlState = useUrlState(
     url,
     "config",
     codecForSyncTermsOfServiceResponse(),
   );
-  const [operationError, setOperationError] = useState<
-    TalerErrorDetail | undefined
-  >();
   const [showConfirm, setShowConfirm] = useState(false);
 
-  async function addBackupProvider() {
+  async function addBackupProvider(): Promise<void> {
     if (!url || !name) return;
 
     const resp = await api.wallet.call(WalletApiOperation.AddBackupProvider, {
@@ -178,8 +173,6 @@ export function useComponentState({
         } else {
           return onComplete(url);
         }
-      case "error":
-        return setOperationError(resp.error);
       case "ok":
         return onComplete(url);
       default:
@@ -190,18 +183,18 @@ export function useComponentState({
   if (showConfirm && urlState && urlState.status === "ok") {
     return {
       status: "confirm-provider",
-      error: operationError,
+      error: undefined,
       onAccept: {
-        onClick: !tos ? undefined : addBackupProvider,
+        onClick: !tos ? undefined : pushAlertOnError(addBackupProvider),
       },
       onCancel: {
-        onClick: onBack,
+        onClick: pushAlertOnError(onBack),
       },
       provider: urlState.result,
       tos: {
         value: tos,
         button: {
-          onClick: async () => setTos(!tos),
+          onClick: pushAlertOnError(async () => setTos(!tos)),
         },
       },
       url: url ?? "",
@@ -213,25 +206,25 @@ export function useComponentState({
     error: undefined,
     name: {
       value: name || "",
-      onInput: async (e) => setName(e),
+      onInput: pushAlertOnError(async (e) => setName(e)),
       error:
         name === undefined ? undefined : !name ? "Can't be empty" : undefined,
     },
     onCancel: {
-      onClick: onBack,
+      onClick: pushAlertOnError(onBack),
     },
     onConfirm: {
       onClick:
         !urlState || urlState.status !== "ok" || !name
           ? undefined
-          : async () => {
+          : pushAlertOnError(async () => {
               setShowConfirm(true);
-            },
+            }),
     },
     urlOk: urlState?.status === "ok",
     url: {
       value: url || "",
-      onInput: async (e) => setHost(e),
+      onInput: pushAlertOnError(async (e) => setHost(e)),
       error: errorString(urlState),
     },
   };
diff --git a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/stories.tsx b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/stories.tsx
index 887ad235e..9d1656ec6 100644
--- a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/stories.tsx
@@ -19,14 +19,14 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { createExample } from "../../test-utils.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
 import { ConfirmProviderView, SelectProviderView } from "./views.js";
 
 export default {
   title: "add backup provider",
 };
 
-export const DemoService = createExample(ConfirmProviderView, {
+export const DemoService = tests.createExample(ConfirmProviderView, {
   url: "https://sync.demo.taler.net/",
   provider: {
     annual_fee: "KUDOS:0.1",
@@ -40,7 +40,7 @@ export const DemoService = createExample(ConfirmProviderView, {
   onCancel: {},
 });
 
-export const FreeService = createExample(ConfirmProviderView, {
+export const FreeService = tests.createExample(ConfirmProviderView, {
   url: "https://sync.taler:9667/",
   provider: {
     annual_fee: "ARS:0",
@@ -54,14 +54,14 @@ export const FreeService = createExample(ConfirmProviderView, {
   onCancel: {},
 });
 
-export const Initial = createExample(SelectProviderView, {
+export const Initial = tests.createExample(SelectProviderView, {
   url: { value: "" },
   name: { value: "" },
   onCancel: {},
   onConfirm: {},
 });
 
-export const WithValue = createExample(SelectProviderView, {
+export const WithValue = tests.createExample(SelectProviderView, {
   url: {
     value: "sync.demo.taler.net",
   },
@@ -72,7 +72,7 @@ export const WithValue = createExample(SelectProviderView, {
   onConfirm: {},
 });
 
-export const WithConnectionError = createExample(SelectProviderView, {
+export const WithConnectionError = tests.createExample(SelectProviderView, {
   url: {
     value: "sync.demo.taler.net",
     error: "Network error",
@@ -84,7 +84,7 @@ export const WithConnectionError = createExample(SelectProviderView, {
   onConfirm: {},
 });
 
-export const WithClientError = createExample(SelectProviderView, {
+export const WithClientError = tests.createExample(SelectProviderView, {
   url: {
     value: "sync.demo.taler.net",
     error: "URL may not be right: (404) Not Found",
@@ -96,7 +96,7 @@ export const WithClientError = createExample(SelectProviderView, {
   onConfirm: {},
 });
 
-export const WithServerError = createExample(SelectProviderView, {
+export const WithServerError = tests.createExample(SelectProviderView, {
   url: {
     value: "sync.demo.taler.net",
     error: "Try another server: (500) Internal Server Error",
diff --git a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/test.ts b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/test.ts
index 3241a3ab0..a939c9268 100644
--- a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/test.ts
+++ b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/test.ts
@@ -21,7 +21,8 @@
 
 import { expect } from "chai";
 import { tests } from "../../../../web-util/src/index.browser.js";
-import { createWalletApiMock, nullFunction } from "../../test-utils.js";
+import { nullFunction } from "../../mui/handlers.js";
+import { createWalletApiMock } from "../../test-utils.js";
 import { Props } from "./index.js";
 import { useComponentState } from "./state.js";