local error impl: errors shown fixed position that are wiped when moved from the view

1 files changed, 7 insertions, 4 deletions

diff --git a/packages/demobank-ui/src/pages/business/ShowCashoutDetails.tsx b/packages/demobank-ui/src/pages/business/ShowCashoutDetails.tsx
index b8e566348..7e7ed21cb 100644
--- a/packages/demobank-ui/src/pages/business/ShowCashoutDetails.tsx
+++ b/packages/demobank-ui/src/pages/business/ShowCashoutDetails.tsx
@@ -18,13 +18,14 @@ import {
   TranslatedString
 } from "@gnu-taler/taler-util";
 import {
-  notify,
+  useLocalNotification,
   useTranslationContext
 } from "@gnu-taler/web-util/browser";
 import { format } from "date-fns";
 import { Fragment, VNode, h } from "preact";
 import { useState } from "preact/hooks";
 import { mutate } from "swr";
+import { Attention } from "../../components/Attention.js";
 import { ErrorLoading } from "../../components/ErrorLoading.js";
 import { Loading } from "../../components/Loading.js";
 import { ShowInputErrorLabel } from "../../components/ShowInputErrorLabel.js";
@@ -38,7 +39,7 @@ import {
   withRuntimeErrorHandling
 } from "../../utils.js";
 import { assertUnreachable } from "../WithdrawalOperationPage.js";
-import { Attention } from "../../components/Attention.js";
+import { ShowLocalNotification } from "../../components/ShowLocalNotification.js";
 
 interface Props {
   id: string;
@@ -54,6 +55,7 @@ export function ShowCashoutDetails({
   const { api } = useBankCoreApiContext()
   const result = useCashoutDetails(id);
   const [code, setCode] = useState<string | undefined>(undefined);
+  const [notification, notify, handleError] = useLocalNotification()
 
   if (!result) {
     return <Loading />
@@ -76,6 +78,7 @@ export function ShowCashoutDetails({
   const isPending = String(result.body.status).toUpperCase() === "PENDING";
   return (
     <div>
+      <ShowLocalNotification notification={notification} />
       <h1>Cashout details {id}</h1>
       <form class="pure-form">
         <fieldset>
@@ -161,7 +164,7 @@ export function ShowCashoutDetails({
               onClick={async (e) => {
                 e.preventDefault();
                 if (!creds) return;
-                await withRuntimeErrorHandling(i18n, async () => {
+                await handleError(async () => {
                   const resp = await api.abortCashoutById(creds, id);
                   if (resp.type === "ok") {
                     onCancel();
@@ -203,7 +206,7 @@ export function ShowCashoutDetails({
               onClick={async (e) => {
                 e.preventDefault();
                 if (!creds || !code) return;
-                await withRuntimeErrorHandling(i18n, async () => {
+                await handleError(async () => {
                   const resp = await api.confirmCashoutById(creds, id, {
                     tan: code,
                   });