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, 18 insertions, 46 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/InvoicePay/index.ts b/packages/taler-wallet-webextension/src/cta/InvoicePay/index.ts
index 82b2c7af5..c8a7eed65 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoicePay/index.ts
+++ b/packages/taler-wallet-webextension/src/cta/InvoicePay/index.ts
@@ -61,7 +61,6 @@ export namespace State {
     goToWalletManualWithdraw: (currency: string) => Promise<void>;
     summary: string | undefined;
     expiration: AbsoluteTime | undefined;
-    operationError?: TalerErrorDetail;
     payStatus: PreparePayResult;
   }
 
diff --git a/packages/taler-wallet-webextension/src/cta/InvoicePay/state.ts b/packages/taler-wallet-webextension/src/cta/InvoicePay/state.ts
index 9c4a3162e..66c018ddf 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoicePay/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/InvoicePay/state.ts
@@ -25,10 +25,11 @@ import {
 } from "@gnu-taler/taler-util";
 import { TalerError, WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { useEffect, 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";
+import { withSafe } from "../../mui/handlers.js";
 import { Props, State } from "./index.js";
 
 export function useComponentState({
@@ -39,6 +40,7 @@ export function useComponentState({
 }: Props): State {
   const api = useBackendContext();
   const { i18n } = useTranslationContext();
+  const { pushAlertOnError } = useAlertContext();
   const hook = useAsyncAsHook(async () => {
     const p2p = await api.wallet.call(WalletApiOperation.CheckPeerPullPayment, {
       talerUri: talerPayPullUri,
@@ -54,10 +56,6 @@ export function useComponentState({
     ),
   );
 
-  const [operationError, setOperationError] = useState<
-    TalerErrorDetail | undefined
-  >(undefined);
-
   if (!hook) {
     return {
       status: "loading",
@@ -109,18 +107,17 @@ export function useComponentState({
     contractTerms: {} as any,
     amountRaw: hook.response.p2p.amount,
     noncePriv: "",
-  };
+  } as any; //FIXME: check this interface with new values
 
   const baseResult = {
     uri: talerPayPullUri,
     cancel: {
-      onClick: onClose,
+      onClick: pushAlertOnError(onClose),
     },
     amount,
     goToWalletManualWithdraw,
     summary,
     expiration: expiration ? AbsoluteTime.fromTimestamp(expiration) : undefined,
-    operationError,
   };
 
   if (!foundBalance) {
@@ -148,21 +145,13 @@ export function useComponentState({
   }
 
   async function accept(): Promise<void> {
-    try {
-      const resp = await api.wallet.call(
-        WalletApiOperation.AcceptPeerPullPayment,
-        {
-          peerPullPaymentIncomingId,
-        },
-      );
-      onSuccess(resp.transactionId);
-    } catch (e) {
-      if (e instanceof TalerError) {
-        setOperationError(e.errorDetail);
-      }
-      console.error(e);
-      throw Error("error trying to accept");
-    }
+    const resp = await api.wallet.call(
+      WalletApiOperation.AcceptPeerPullPayment,
+      {
+        peerPullPaymentIncomingId,
+      },
+    );
+    onSuccess(resp.transactionId);
   }
 
   return {
@@ -172,7 +161,7 @@ export function useComponentState({
     payStatus: paymentPossible,
     balance: foundAmount,
     accept: {
-      onClick: accept,
+      onClick: pushAlertOnError(accept),
     },
   };
 }
diff --git a/packages/taler-wallet-webextension/src/cta/InvoicePay/stories.tsx b/packages/taler-wallet-webextension/src/cta/InvoicePay/stories.tsx
index 749cd78fc..1dada5a91 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoicePay/stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/InvoicePay/stories.tsx
@@ -20,14 +20,14 @@
  */
 
 import { PreparePayResult, PreparePayResultType } from "@gnu-taler/taler-util";
-import { createExample } from "../../test-utils.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
 import { ReadyView } from "./views.js";
 
 export default {
   title: "invoice payment",
 };
 
-export const Ready = createExample(ReadyView, {
+export const Ready = tests.createExample(ReadyView, {
   amount: {
     currency: "ARS",
     value: 1,
diff --git a/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx b/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx
index 6a9ab3cf7..9a748891c 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx
@@ -16,11 +16,10 @@
 
 import { Fragment, h, VNode } from "preact";
 import { Amount } from "../../components/Amount.js";
-import { ErrorTalerOperation } from "../../components/ErrorTalerOperation.js";
 import { LogoHeader } from "../../components/LogoHeader.js";
 import { Part } from "../../components/Part.js";
 import { PaymentButtons } from "../../components/PaymentButtons.js";
-import { Link, SubTitle, WalletAction } from "../../components/styled/index.js";
+import { SubTitle, WalletAction } from "../../components/styled/index.js";
 import { Time } from "../../components/Time.js";
 import { useTranslationContext } from "../../context/translation.js";
 import { State } from "./index.js";
@@ -29,29 +28,14 @@ export function ReadyView(
   state: State.Ready | State.NoBalanceForCurrency | State.NoEnoughBalance,
 ): VNode {
   const { i18n } = useTranslationContext();
-  const {
-    operationError,
-    summary,
-    amount,
-    expiration,
-    uri,
-    status,
-    balance,
-    payStatus,
-    cancel,
-  } = state;
+  const { summary, amount, expiration, uri, status, balance, payStatus } =
+    state;
   return (
     <WalletAction>
       <LogoHeader />
       <SubTitle>
         <i18n.Translate>Digital invoice</i18n.Translate>
       </SubTitle>
-      {operationError && (
-        <ErrorTalerOperation
-          title={i18n.str`Could not finish the payment operation`}
-          error={operationError}
-        />
-      )}
       <section style={{ textAlign: "left" }}>
         <Part title={i18n.str`Subject`} text={<div>{summary}</div>} />
         <Part title={i18n.str`Amount`} text={<Amount value={amount} />} />