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

1 files changed, 9 insertions, 8 deletions

diff --git a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
index 0637a8af4..abdebf9bf 100644
--- a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
+++ b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
@@ -17,17 +17,14 @@
 import {
   AmountJson,
   Amounts,
-  HttpStatusCode,
   Logger,
-  TalerError,
   TranslatedString,
   parseWithdrawUri
 } from "@gnu-taler/taler-util";
 import {
-  RequestError,
-  notify,
   notifyError,
-  useTranslationContext,
+  useLocalNotification,
+  useTranslationContext
 } from "@gnu-taler/web-util/browser";
 import { Fragment, VNode, h } from "preact";
 import { forwardRef } from "preact/compat";
@@ -36,10 +33,11 @@ import { Attention } from "../components/Attention.js";
 import { useBankCoreApiContext } from "../context/config.js";
 import { useBackendState } from "../hooks/backend.js";
 import { useSettings } from "../hooks/settings.js";
-import { buildRequestErrorMessage, undefinedIfEmpty, withRuntimeErrorHandling } from "../utils.js";
-import { assertUnreachable } from "./WithdrawalOperationPage.js";
+import { undefinedIfEmpty, withRuntimeErrorHandling } from "../utils.js";
 import { OperationState } from "./OperationState/index.js";
 import { InputAmount, doAutoFocus } from "./PaytoWireTransferForm.js";
+import { assertUnreachable } from "./WithdrawalOperationPage.js";
+import { ShowLocalNotification } from "../components/ShowLocalNotification.js";
 
 const logger = new Logger("WalletWithdrawForm");
 const RefAmount = forwardRef(InputAmount);
@@ -59,6 +57,7 @@ function OldWithdrawalForm({ goToConfirmOperation, limit, onCancel, focus }: {
 
   const { api } = useBankCoreApiContext()
   const [amountStr, setAmountStr] = useState<string | undefined>(`${settings.maxWithdrawalAmount}`);
+  const [notification, notify, handleError] = useLocalNotification()
 
   if (!!settings.currentWithdrawalOperationId) {
     return <Attention type="warning" title={i18n.str`There is an operation already`}>
@@ -88,7 +87,7 @@ function OldWithdrawalForm({ goToConfirmOperation, limit, onCancel, focus }: {
 
   async function doStart() {
     if (!parsedAmount || !creds) return;
-    await withRuntimeErrorHandling(i18n, async () => {
+    await handleError(async () => {
       const resp = await api.createWithdrawal(creds, {
         amount: Amounts.stringify(parsedAmount),
       });
@@ -136,6 +135,8 @@ function OldWithdrawalForm({ goToConfirmOperation, limit, onCancel, focus }: {
       e.preventDefault()
     }}
   >
+              <ShowLocalNotification notification={notification} />
+
     <div class="px-4 py-6 ">
       <div class="grid max-w-xs grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
         <div class="sm:col-span-5">