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, 27 insertions, 20 deletions

diff --git a/packages/taler-wallet-webextension/src/popup/Application.tsx b/packages/taler-wallet-webextension/src/popup/Application.tsx
index 13ce71974..c9f98c0fb 100644
--- a/packages/taler-wallet-webextension/src/popup/Application.tsx
+++ b/packages/taler-wallet-webextension/src/popup/Application.tsx
@@ -23,10 +23,10 @@
 import { createHashHistory } from "history";
 import { ComponentChildren, Fragment, h, VNode } from "preact";
 import Router, { route, Route } from "preact-router";
-import { Match } from "preact-router/match";
 import { useEffect, useState } from "preact/hooks";
 import PendingTransactions from "../components/PendingTransactions.js";
 import { PopupBox } from "../components/styled/index.js";
+import { AlertProvider } from "../context/alert.js";
 import { DevContextProvider } from "../context/devContext.js";
 import { IoCProviderForRuntime } from "../context/iocContext.js";
 import {
@@ -34,7 +34,7 @@ import {
   useTranslationContext,
 } from "../context/translation.js";
 import { useTalerActionURL } from "../hooks/useTalerActionURL.js";
-import { PopupNavBarOptions, Pages, PopupNavBar } from "../NavigationBar.js";
+import { Pages, PopupNavBar, PopupNavBarOptions } from "../NavigationBar.js";
 import { platform } from "../platform/foreground.js";
 import { BackupPage } from "../wallet/BackupPage.js";
 import { ProviderDetailPage } from "../wallet/ProviderDetailPage.js";
@@ -219,7 +219,9 @@ function PopupTemplate({
         <PendingTransactions goToTransaction={goToTransaction} />
       ) : undefined}
       <PopupNavBar path={path} />
-      <PopupBox>{children}</PopupBox>
+      <PopupBox>
+        <AlertProvider>{children}</AlertProvider>
+      </PopupBox>
     </Fragment>
   );
 }
diff --git a/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx b/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx
index 8f3762c29..0fe9e7b49 100644
--- a/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx
+++ b/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx
@@ -19,19 +19,19 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { createExample } from "../test-utils.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
 import { BalanceView as TestedComponent } from "./BalancePage.js";
 
 export default {
   title: "balance",
 };
 
-export const EmptyBalance = createExample(TestedComponent, {
+export const EmptyBalance = tests.createExample(TestedComponent, {
   balances: [],
   goToWalletManualWithdraw: {},
 });
 
-export const SomeCoins = createExample(TestedComponent, {
+export const SomeCoins = tests.createExample(TestedComponent, {
   balances: [
     {
       available: "USD:10.5",
@@ -45,7 +45,7 @@ export const SomeCoins = createExample(TestedComponent, {
   goToWalletManualWithdraw: {},
 });
 
-export const SomeCoinsInTreeCurrencies = createExample(TestedComponent, {
+export const SomeCoinsInTreeCurrencies = tests.createExample(TestedComponent, {
   balances: [
     {
       available: "EUR:1",
@@ -73,7 +73,7 @@ export const SomeCoinsInTreeCurrencies = createExample(TestedComponent, {
   addAction: {},
 });
 
-export const NoCoinsInTreeCurrencies = createExample(TestedComponent, {
+export const NoCoinsInTreeCurrencies = tests.createExample(TestedComponent, {
   balances: [
     {
       available: "EUR:3",
@@ -101,7 +101,7 @@ export const NoCoinsInTreeCurrencies = createExample(TestedComponent, {
   addAction: {},
 });
 
-export const SomeCoinsInFiveCurrencies = createExample(TestedComponent, {
+export const SomeCoinsInFiveCurrencies = tests.createExample(TestedComponent, {
   balances: [
     {
       available: "USD:0",
diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
index 96f0f6dd9..87767d008 100644
--- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
@@ -22,7 +22,11 @@ import { BalanceTable } from "../components/BalanceTable.js";
 import { ErrorAlertView } from "../components/CurrentAlerts.js";
 import { Loading } from "../components/Loading.js";
 import { MultiActionButton } from "../components/MultiActionButton.js";
-import { alertFromError, ErrorAlert } from "../context/alert.js";
+import {
+  alertFromError,
+  ErrorAlert,
+  useAlertContext,
+} from "../context/alert.js";
 import { useBackendContext } from "../context/backend.js";
 import { useTranslationContext } from "../context/translation.js";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
@@ -75,6 +79,7 @@ function useComponentState({
 }: Props): State {
   const api = useBackendContext();
   const { i18n } = useTranslationContext();
+  const { pushAlertOnError } = useAlertContext();
   const [addingAction, setAddingAction] = useState(false);
   const state = useAsyncAsHook(() =>
     api.wallet.call(WalletApiOperation.GetBalances, {}),
@@ -104,7 +109,7 @@ function useComponentState({
       status: "action",
       error: undefined,
       cancel: {
-        onClick: async () => setAddingAction(false),
+        onClick: pushAlertOnError(async () => setAddingAction(false)),
       },
     };
   }
@@ -113,10 +118,10 @@ function useComponentState({
     error: undefined,
     balances: state.response.balances,
     addAction: {
-      onClick: async () => setAddingAction(true),
+      onClick: pushAlertOnError(async () => setAddingAction(true)),
     },
     goToWalletManualWithdraw: {
-      onClick: goToWalletManualWithdraw,
+      onClick: pushAlertOnError(goToWalletManualWithdraw),
     },
     goToWalletDeposit,
     goToWalletHistory,
diff --git a/packages/taler-wallet-webextension/src/popup/TalerActionFound.stories.tsx b/packages/taler-wallet-webextension/src/popup/TalerActionFound.stories.tsx
index 00293a690..e928cb538 100644
--- a/packages/taler-wallet-webextension/src/popup/TalerActionFound.stories.tsx
+++ b/packages/taler-wallet-webextension/src/popup/TalerActionFound.stories.tsx
@@ -19,33 +19,33 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { createExample } from "../test-utils.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
 import { TalerActionFound as TestedComponent } from "./TalerActionFound.js";
 
 export default {
   title: "TalerActionFound",
 };
 
-export const PayAction = createExample(TestedComponent, {
+export const PayAction = tests.createExample(TestedComponent, {
   url: "taler://pay/something",
 });
 
-export const WithdrawalAction = createExample(TestedComponent, {
+export const WithdrawalAction = tests.createExample(TestedComponent, {
   url: "taler://withdraw/something",
 });
 
-export const TipAction = createExample(TestedComponent, {
+export const TipAction = tests.createExample(TestedComponent, {
   url: "taler://tip/something",
 });
 
-export const NotifyAction = createExample(TestedComponent, {
+export const NotifyAction = tests.createExample(TestedComponent, {
   url: "taler://notify-reserve/something",
 });
 
-export const RefundAction = createExample(TestedComponent, {
+export const RefundAction = tests.createExample(TestedComponent, {
   url: "taler://refund/something",
 });
 
-export const InvalidAction = createExample(TestedComponent, {
+export const InvalidAction = tests.createExample(TestedComponent, {
   url: "taler://something/asd",
 });