1 files changed, 40 insertions, 43 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/Payment/state.ts b/packages/taler-wallet-webextension/src/cta/Payment/state.ts
index 970af5b81..4733e5aee 100644
--- a/packages/taler-wallet-webextension/src/cta/Payment/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/Payment/state.ts
@@ -19,20 +19,25 @@ import {
   ConfirmPayResultType,
   NotificationType,
   PreparePayResultType,
-  TalerErrorCode,
 } from "@gnu-taler/taler-util";
-import { TalerError, WalletApiOperation } from "@gnu-taler/taler-wallet-core";
-import { useEffect, useState } from "preact/hooks";
+import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
+import { useEffect } from "preact/hooks";
+import { alertFromError, useAlertContext } from "../../context/alert.js";
+import { useBackendContext } from "../../context/backend.js";
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { ButtonHandler } from "../../mui/handlers.js";
-import { wxApi } from "../../wxApi.js";
 import { Props, State } from "./index.js";
 
-export function useComponentState(
-  { talerPayUri, cancel, goToWalletManualWithdraw, onSuccess }: Props,
-  api: typeof wxApi,
-): State {
-  const [payErrMsg, setPayErrMsg] = useState<TalerError | undefined>(undefined);
+export function useComponentState({
+  talerPayUri,
+  cancel,
+  goToWalletManualWithdraw,
+  onSuccess,
+}: Props): State {
+  const { pushAlertOnError } = useAlertContext();
+  const api = useBackendContext();
+  const { i18n } = useTranslationContext();
 
   const hook = useAsyncAsHook(async () => {
     if (!talerPayUri) throw Error("ERROR_NO-URI-FOR-PAYMENT");
@@ -49,7 +54,7 @@ export function useComponentState(
   useEffect(
     () =>
       api.listener.onUpdateNotification(
-        [NotificationType.CoinWithdrawn],
+        [NotificationType.TransactionStateTransition],
         hook?.retry,
       ),
     [hook],
@@ -77,10 +82,20 @@ export function useComponentState(
   if (!hook) return { status: "loading", error: undefined };
   if (hook.hasError) {
     return {
-      status: "loading-uri",
-      error: hook,
+      status: "error",
+      error: alertFromError(
+        i18n,
+        i18n.str`Could not load the payment and balance status`,
+        hook,
+      ),
     };
   }
+  // if (hook.hasError) {
+  //   return {
+  //     status: "loading-uri",
+  //     error: hook,
+  //   };
+  // }
   const { payStatus } = hook.response;
 
   const amount = Amounts.parseOrThrow(payStatus.amountRaw);
@@ -127,43 +142,25 @@ export function useComponentState(
   }
 
   async function doPayment(): Promise<void> {
-    try {
-      if (payStatus.status !== "payment-possible") {
-        throw TalerError.fromUncheckedDetail({
-          code: TalerErrorCode.GENERIC_CLIENT_INTERNAL_ERROR,
-          hint: `payment is not possible: ${payStatus.status}`,
-        });
-      }
-      const res = await api.wallet.call(WalletApiOperation.ConfirmPay, {
-        proposalId: payStatus.proposalId,
-      });
-      // handle confirm pay
-      if (res.type !== ConfirmPayResultType.Done) {
-        throw TalerError.fromUncheckedDetail({
-          code: TalerErrorCode.GENERIC_CLIENT_INTERNAL_ERROR,
-          hint: `could not confirm payment`,
-          payResult: res,
-        });
-      }
-      const fu = res.contractTerms.fulfillment_url;
-      if (fu) {
-        if (typeof window !== "undefined") {
-          document.location.href = fu;
-        } else {
-          console.log(`should d to ${fu}`);
-        }
-      }
+    const res = await api.wallet.call(WalletApiOperation.ConfirmPay, {
+      proposalId: payStatus.proposalId,
+    });
+    // handle confirm pay
+    if (res.type !== ConfirmPayResultType.Done) {
       onSuccess(res.transactionId);
-    } catch (e) {
-      if (e instanceof TalerError) {
-        setPayErrMsg(e);
+      return;
+    }
+    const fu = res.contractTerms.fulfillment_url;
+    if (fu) {
+      if (typeof window !== "undefined") {
+        document.location.href = fu;
       }
     }
+    onSuccess(res.transactionId);
   }
 
   const payHandler: ButtonHandler = {
-    onClick: payErrMsg ? undefined : doPayment,
-    error: payErrMsg,
+    onClick: pushAlertOnError(doPayment),
   };
 
   // (payStatus.status === PreparePayResultType.PaymentPossible)