1 files changed, 16 insertions, 47 deletions

diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx
index c4b18189f..d8942a8e7 100644
--- a/packages/demobank-ui/src/pages/BankFrame.tsx
+++ b/packages/demobank-ui/src/pages/BankFrame.tsx
@@ -21,16 +21,10 @@ import { StateUpdater, useEffect, useState } from "preact/hooks";
 import talerLogo from "../assets/logo-white.svg";
 import { LangSelectorLikePy as LangSelector } from "../components/LangSelector.js";
 import { useBackendContext } from "../context/backend.js";
-import {
-  ErrorMessage,
-  PageStateProvider,
-  PageStateType,
-  errorListeners,
-  infoListeners,
-  usePageContext,
-} from "../context/pageState.js";
 import { useBusinessAccountDetails } from "../hooks/circuit.js";
 import { bankUiSettings } from "../settings.js";
+import { useSettings } from "../hooks/settings.js";
+import { ErrorMessage, onNotificationUpdate } from "../hooks/notification.js";
 
 const IS_PUBLIC_ACCOUNT_ENABLED = false;
 
@@ -60,20 +54,7 @@ function MaybeBusinessButton({
   );
 }
 
-export function BankFrame(props: {
-  children: ComponentChildren;
-  goToBusinessAccount?: () => void;
-}): VNode {
-  return (
-    <PageStateProvider>
-      <BankFrame2 goToBusinessAccount={props.goToBusinessAccount}>
-        {props.children}
-      </BankFrame2>
-    </PageStateProvider>
-  );
-}
-
-function BankFrame2({
+export function BankFrame({
   children,
   goToBusinessAccount,
 }: {
@@ -82,8 +63,7 @@ function BankFrame2({
 }): VNode {
   const { i18n } = useTranslationContext();
   const backend = useBackendContext();
-
-  const { pageStateSetter } = usePageContext();
+  const [settings, updateSettings] = useSettings();
 
   const demo_sites = [];
   for (const i in bankUiSettings.demoSites)
@@ -158,9 +138,7 @@ function BankFrame2({
                 class="pure-button logout-button"
                 onClick={() => {
                   backend.logOut();
-                  pageStateSetter({
-                    currentWithdrawalOperationId: undefined,
-                  });
+                  updateSettings("currentWithdrawalOperationId", undefined);
                 }}
               >{i18n.str`Logout`}</a>
             </div>
@@ -255,28 +233,19 @@ function ErrorBanner({
 function StatusBanner(): VNode | null {
   const [info, setInfo] = useState<TranslatedString>();
   const [error, setError] = useState<ErrorMessage>();
-  function listenError(e: ErrorMessage) {
-    setError(e);
-  }
-  function listenInfo(m: TranslatedString) {
-    setInfo(m);
-  }
   useEffect(() => {
-    /**
-     * Refactor this to reuse the pattern observable/listener
-     */
-    errorListeners.push(listenError);
-    infoListeners.push(listenInfo);
-    return function unsuscribe() {
-      const idx = infoListeners.findIndex((d) => d === listenInfo);
-      if (idx !== -1) {
-        infoListeners.splice(idx, 1);
-      }
-      const idx2 = errorListeners.findIndex((d) => d === listenError);
-      if (idx2 !== -1) {
-        errorListeners.splice(idx2, 1);
+    return onNotificationUpdate((newValue) => {
+      if (newValue === undefined) {
+        setInfo(undefined);
+        setError(undefined);
+      } else {
+        if (newValue.type === "error") {
+          setError(newValue.error);
+        } else {
+          setInfo(newValue.info);
+        }
       }
-    };
+    });
   }, []);
   return (
     <div