using new localStorage api, pageState => settings, notifcation using observer api

21 files changed, 176 insertions, 312 deletions

diff --git a/packages/demobank-ui/.gitignore b/packages/demobank-ui/.gitignore
index 7e0633d5e..30cb2774c 100644
--- a/packages/demobank-ui/.gitignore
+++ b/packages/demobank-ui/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 /build
 /*.log
+/demobank-ui-settings.js
diff --git a/packages/demobank-ui/src/components/app.tsx b/packages/demobank-ui/src/components/app.tsx
index ef535bb9f..5783c288a 100644
--- a/packages/demobank-ui/src/components/app.tsx
+++ b/packages/demobank-ui/src/components/app.tsx
@@ -18,13 +18,12 @@ import {
   globalLogLevel,
   setGlobalLogLevelFromString,
 } from "@gnu-taler/taler-util";
-import { h, FunctionalComponent } from "preact";
-import { BackendStateProvider } from "../context/backend.js";
-import { PageStateProvider } from "../context/pageState.js";
-import { Routing } from "../pages/Routing.js";
-import { strings } from "../i18n/strings.js";
 import { TranslationProvider } from "@gnu-taler/web-util/lib/index.browser";
+import { FunctionalComponent, h } from "preact";
 import { SWRConfig } from "swr";
+import { BackendStateProvider } from "../context/backend.js";
+import { strings } from "../i18n/strings.js";
+import { Routing } from "../pages/Routing.js";
 
 const WITH_LOCAL_STORAGE_CACHE = false;
 
diff --git a/packages/demobank-ui/src/context/pageState.ts b/packages/demobank-ui/src/context/pageState.ts
deleted file mode 100644
index 074fbcafc..000000000
--- a/packages/demobank-ui/src/context/pageState.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-/*
- This file is part of GNU Taler
- (C) 2022 Taler Systems S.A.
-
- GNU Taler is free software; you can redistribute it and/or modify it under the
- terms of the GNU General Public License as published by the Free Software
- Foundation; either version 3, or (at your option) any later version.
-
- GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
- WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
-
- You should have received a copy of the GNU General Public License along with
- GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
- */
-
-import { TranslatedString } from "@gnu-taler/taler-util";
-import { useNotNullLocalStorage } from "@gnu-taler/web-util/lib/index.browser";
-import { ComponentChildren, createContext, h, VNode } from "preact";
-import { StateUpdater, useContext } from "preact/hooks";
-
-/**
- *
- * @author Sebastian Javier Marchano (sebasjm)
- */
-
-export type Type = {
-  pageState: PageStateType;
-  pageStateSetter: StateUpdater<PageStateType>;
-};
-const initial: Type = {
-  pageState: {},
-  pageStateSetter: () => {
-    null;
-  },
-};
-const Context = createContext<Type>(initial);
-
-export const usePageContext = (): Type => useContext(Context);
-
-export const PageStateProvider = ({
-  children,
-}: {
-  children: ComponentChildren;
-}): VNode => {
-  const [pageState, pageStateSetter] = usePageState();
-
-  return h(Context.Provider, {
-    value: { pageState, pageStateSetter },
-    children,
-  });
-};
-
-/**
- * Wrapper providing defaults.
- */
-function usePageState(
-  state: PageStateType = {},
-): [PageStateType, StateUpdater<PageStateType>] {
-  const ret = useNotNullLocalStorage("page-state", JSON.stringify(state));
-  const retObj: PageStateType = JSON.parse(ret[0]);
-
-  const retSetter: StateUpdater<PageStateType> = function (val) {
-    const newVal =
-      val instanceof Function
-        ? JSON.stringify(val(retObj))
-        : JSON.stringify(val);
-
-    ret[1](newVal);
-  };
-
-  //when moving from one page to another
-  //clean up the info and error bar
-  function removeLatestInfo(val: any): ReturnType<typeof retSetter> {
-    const updater = typeof val === "function" ? val : (c: any) => val;
-    return retSetter((current: any) => {
-      const cleanedCurrent: PageStateType = {
-        ...current,
-        info: undefined,
-        errors: undefined,
-        timestamp: new Date().getTime(),
-      };
-      return updater(cleanedCurrent);
-    });
-  }
-
-  return [retObj, removeLatestInfo];
-}
-
-export type ErrorMessage = {
-  description?: string;
-  title: TranslatedString;
-  debug?: string;
-};
-/**
- * Track page state.
- */
-export interface PageStateType {
-  currentWithdrawalOperationId?: string;
-}
-
-export interface ObservedStateType {
-  error: ErrorMessage | undefined;
-  info: TranslatedString | undefined;
-}
-export const errorListeners: Array<(error: ErrorMessage) => void> = [];
-export const infoListeners: Array<(info: TranslatedString) => void> = [];
-export function notifyError(error: ErrorMessage) {
-  errorListeners.forEach((cb) => cb(error));
-}
-export function notifyInfo(info: TranslatedString) {
-  infoListeners.forEach((cb) => cb(info));
-}
diff --git a/packages/demobank-ui/src/hooks/backend.ts b/packages/demobank-ui/src/hooks/backend.ts
index ca73a4793..9fe0f5b14 100644
--- a/packages/demobank-ui/src/hooks/backend.ts
+++ b/packages/demobank-ui/src/hooks/backend.ts
@@ -82,7 +82,7 @@ export interface BackendStateHandler {
  * base URL.
  */
 export function useBackendState(): BackendStateHandler {
-  const [value, update] = useLocalStorage(
+  const { value, update } = useLocalStorage(
     "backend-state",
     JSON.stringify(defaultState),
   );
diff --git a/packages/demobank-ui/src/hooks/index.ts b/packages/demobank-ui/src/hooks/index.ts
index 263b53e1d..99da9e679 100644
--- a/packages/demobank-ui/src/hooks/index.ts
+++ b/packages/demobank-ui/src/hooks/index.ts
@@ -20,10 +20,7 @@
  */
 
 import { StateUpdater } from "preact/hooks";
-import {
-  useLocalStorage,
-  useNotNullLocalStorage,
-} from "@gnu-taler/web-util/lib/index.browser";
+import { useLocalStorage } from "@gnu-taler/web-util/lib/index.browser";
 export type ValueOrFunction<T> = T | ((p: T) => T);
 
 const calculateRootPath = () => {
@@ -37,38 +34,23 @@ const calculateRootPath = () => {
 export function useBackendURL(
   url?: string,
 ): [string, boolean, StateUpdater<string>, () => void] {
-  const [value, setter] = useNotNullLocalStorage(
+  const { value, update: setter } = useLocalStorage(
     "backend-url",
     url || calculateRootPath(),
   );
-  const [triedToLog, setTriedToLog] = useLocalStorage("tried-login");
+
+  const {
+    value: triedToLog,
+    update: setTriedToLog,
+    reset: resetBackend,
+  } = useLocalStorage("tried-login");
 
   const checkedSetter = (v: ValueOrFunction<string>) => {
     setTriedToLog("yes");
-    return setter((p) => (v instanceof Function ? v(p) : v).replace(/\/$/, ""));
+    const computedValue =
+      v instanceof Function ? v(value) : v.replace(/\/$/, "");
+    return setter(computedValue);
   };
 
-  const resetBackend = () => {
-    setTriedToLog(undefined);
-  };
   return [value, !!triedToLog, checkedSetter, resetBackend];
 }
-
-export function useBackendDefaultToken(): [
-  string | undefined,
-  StateUpdater<string | undefined>,
-] {
-  return useLocalStorage("backend-token");
-}
-
-export function useBackendInstanceToken(
-  id: string,
-): [string | undefined, StateUpdater<string | undefined>] {
-  const [token, setToken] = useLocalStorage(`backend-token-${id}`);
-  const [defaultToken, defaultSetToken] = useBackendDefaultToken();
-
-  // instance named 'default' use the default token
-  if (id === "default") return [defaultToken, defaultSetToken];
-
-  return [token, setToken];
-}
diff --git a/packages/demobank-ui/src/hooks/notification.ts b/packages/demobank-ui/src/hooks/notification.ts
new file mode 100644
index 000000000..7cdece515
--- /dev/null
+++ b/packages/demobank-ui/src/hooks/notification.ts
@@ -0,0 +1,54 @@
+import { TranslatedString } from "@gnu-taler/taler-util";
+import { memoryMap } from "@gnu-taler/web-util/lib/index.browser";
+import { StateUpdater, useEffect, useState } from "preact/hooks";
+
+export type NotificationMessage = ErrorNotification | InfoNotification;
+
+//FIXME: this should not be exported since every notification
+// goes throw notify function
+export interface ErrorMessage {
+  description?: string;
+  title: TranslatedString;
+  debug?: string;
+}
+
+interface ErrorNotification {
+  type: "error";
+  error: ErrorMessage;
+}
+interface InfoNotification {
+  type: "info";
+  info: TranslatedString;
+}
+
+const storage = memoryMap<NotificationMessage>();
+const NOTIFICATION_KEY = "notification";
+
+export function onNotificationUpdate(
+  handler: (newValue: NotificationMessage | undefined) => void,
+) {
+  return storage.onUpdate(NOTIFICATION_KEY, () => {
+    const newValue = storage.get(NOTIFICATION_KEY);
+    handler(newValue);
+  });
+}
+
+export function notifyError(error: ErrorMessage) {
+  storage.set(NOTIFICATION_KEY, { type: "error", error });
+}
+export function notifyInfo(info: TranslatedString) {
+  storage.set(NOTIFICATION_KEY, { type: "info", info });
+}
+
+export function useNotifications(): [
+  NotificationMessage | undefined,
+  StateUpdater<NotificationMessage | undefined>,
+] {
+  const [value, setter] = useState<NotificationMessage | undefined>();
+  useEffect(() => {
+    return storage.onUpdate(NOTIFICATION_KEY, () => {
+      setter(storage.get(NOTIFICATION_KEY));
+    });
+  });
+  return [value, setter];
+}
diff --git a/packages/demobank-ui/src/hooks/settings.ts b/packages/demobank-ui/src/hooks/settings.ts
new file mode 100644
index 000000000..5115f9959
--- /dev/null
+++ b/packages/demobank-ui/src/hooks/settings.ts
@@ -0,0 +1,49 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { useLocalStorage } from "@gnu-taler/web-util/lib/index.browser";
+
+interface Settings {
+  currentWithdrawalOperationId: string | undefined;
+}
+
+const defaultSettings: Settings = {
+  currentWithdrawalOperationId: undefined,
+};
+
+function parse_json_or_undefined<T>(str: string | undefined): T | undefined {
+  if (str === undefined) return undefined;
+  try {
+    return JSON.parse(str);
+  } catch {
+    return undefined;
+  }
+}
+
+export function useSettings(): [
+  Readonly<Settings>,
+  <T extends keyof Settings>(key: T, value: Settings[T]) => void,
+] {
+  const { value, update } = useLocalStorage("demobank-settings");
+
+  const parsed: Settings = parse_json_or_undefined(value) ?? defaultSettings;
+  function updateField<T extends keyof Settings>(k: T, v: Settings[T]) {
+    const newValue = { ...parsed, [k]: v };
+    const json = JSON.stringify(newValue);
+    update(json);
+  }
+  return [parsed, updateField];
+}
diff --git a/packages/demobank-ui/src/pages/AccountPage.tsx b/packages/demobank-ui/src/pages/AccountPage.tsx
index 013c1b8c1..339f054d7 100644
--- a/packages/demobank-ui/src/pages/AccountPage.tsx
+++ b/packages/demobank-ui/src/pages/AccountPage.tsx
@@ -23,10 +23,10 @@ import {
 import { Fragment, VNode, h } from "preact";
 import { Transactions } from "../components/Transactions/index.js";
 import { useBackendContext } from "../context/backend.js";
-import { notifyError } from "../context/pageState.js";
 import { useAccountDetails } from "../hooks/access.js";
 import { LoginForm } from "./LoginForm.js";
 import { PaymentOptions } from "./PaymentOptions.js";
+import { notifyError } from "../hooks/notification.js";
 
 interface Props {
   account: string;
diff --git a/packages/demobank-ui/src/pages/AdminPage.tsx b/packages/demobank-ui/src/pages/AdminPage.tsx
index b867d0103..ad4a6d1a4 100644
--- a/packages/demobank-ui/src/pages/AdminPage.tsx
+++ b/packages/demobank-ui/src/pages/AdminPage.tsx
@@ -25,7 +25,6 @@ import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { Cashouts } from "../components/Cashouts/index.js";
 import { useBackendContext } from "../context/backend.js";
-import { ErrorMessage, notifyInfo } from "../context/pageState.js";
 import { useAccountDetails } from "../hooks/access.js";
 import {
   useAdminAccountAPI,
@@ -45,6 +44,7 @@ import { ShowCashoutDetails } from "./BusinessAccount.js";
 import { handleNotOkResult } from "./HomePage.js";
 import { PaytoWireTransferForm } from "./PaytoWireTransferForm.js";
 import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
+import { ErrorMessage, notifyInfo } from "../hooks/notification.js";
 
 const charset =
   "abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
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
diff --git a/packages/demobank-ui/src/pages/BusinessAccount.tsx b/packages/demobank-ui/src/pages/BusinessAccount.tsx
index 02e64ac39..8c505b8f5 100644
--- a/packages/demobank-ui/src/pages/BusinessAccount.tsx
+++ b/packages/demobank-ui/src/pages/BusinessAccount.tsx
@@ -29,13 +29,6 @@ import { Fragment, VNode, h } from "preact";
 import { StateUpdater, useEffect, useState } from "preact/hooks";
 import { Cashouts } from "../components/Cashouts/index.js";
 import { useBackendContext } from "../context/backend.js";
-import {
-  ErrorMessage,
-  ObservedStateType,
-  PageStateType,
-  notifyInfo,
-  usePageContext,
-} from "../context/pageState.js";
 import { useAccountDetails } from "../hooks/access.js";
 import {
   useCashoutDetails,
@@ -53,6 +46,7 @@ import { ErrorBannerFloat } from "./BankFrame.js";
 import { LoginForm } from "./LoginForm.js";
 import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
 import { handleNotOkResult } from "./HomePage.js";
+import { ErrorMessage, notifyInfo } from "../hooks/notification.js";
 
 interface Props {
   onClose: () => void;
diff --git a/packages/demobank-ui/src/pages/HomePage.tsx b/packages/demobank-ui/src/pages/HomePage.tsx
index 2cdbc49bc..340181a4f 100644
--- a/packages/demobank-ui/src/pages/HomePage.tsx
+++ b/packages/demobank-ui/src/pages/HomePage.tsx
@@ -27,17 +27,11 @@ import {
   useTranslationContext,
 } from "@gnu-taler/web-util/lib/index.browser";
 import { Fragment, VNode, h } from "preact";
-import { StateUpdater } from "preact/hooks";
 import { Loading } from "../components/Loading.js";
 import { useBackendContext } from "../context/backend.js";
-import {
-  ObservedStateType,
-  PageStateType,
-  notifyError,
-  notifyInfo,
-  usePageContext,
-} from "../context/pageState.js";
 import { getInitialBackendBaseURL } from "../hooks/backend.js";
+import { notifyError, notifyInfo } from "../hooks/notification.js";
+import { useSettings } from "../hooks/settings.js";
 import { AccountPage } from "./AccountPage.js";
 import { AdminPage } from "./AdminPage.js";
 import { LoginForm } from "./LoginForm.js";
@@ -63,15 +57,15 @@ export function HomePage({
   onRegister: () => void;
 }): VNode {
   const backend = useBackendContext();
-  const { pageState, pageStateSetter } = usePageContext();
+  const [settings] = useSettings();
   const { i18n } = useTranslationContext();
 
   if (backend.state.status === "loggedOut") {
     return <LoginForm onRegister={onRegister} />;
   }
 
-  if (pageState.currentWithdrawalOperationId) {
-    onPendingOperationFound(pageState.currentWithdrawalOperationId);
+  if (settings.currentWithdrawalOperationId) {
+    onPendingOperationFound(settings.currentWithdrawalOperationId);
     return <Loading />;
   }
 
@@ -104,9 +98,10 @@ export function WithdrawalOperationPage({
   });
   const parsedUri = parseWithdrawUri(uri);
   const { i18n } = useTranslationContext();
-  const { pageStateSetter } = usePageContext();
+
+  const [settings, updateSettings] = useSettings();
   function clearCurrentWithdrawal(): void {
-    pageStateSetter({});
+    updateSettings("currentWithdrawalOperationId", undefined);
     onAbort();
   }
 
diff --git a/packages/demobank-ui/src/pages/LoginForm.tsx b/packages/demobank-ui/src/pages/LoginForm.tsx
index 0ea001fe2..3e8aee259 100644
--- a/packages/demobank-ui/src/pages/LoginForm.tsx
+++ b/packages/demobank-ui/src/pages/LoginForm.tsx
@@ -19,11 +19,11 @@ import {
   ErrorType,
   useTranslationContext,
 } from "@gnu-taler/web-util/lib/index.browser";
-import { Fragment, h, VNode } from "preact";
+import { Fragment, VNode, h } from "preact";
 import { useEffect, useRef, useState } from "preact/hooks";
 import { useBackendContext } from "../context/backend.js";
-import { ErrorMessage } from "../context/pageState.js";
 import { useCredentialsChecker } from "../hooks/backend.js";
+import { ErrorMessage } from "../hooks/notification.js";
 import { bankUiSettings } from "../settings.js";
 import { undefinedIfEmpty } from "../utils.js";
 import { ErrorBannerFloat } from "./BankFrame.js";
diff --git a/packages/demobank-ui/src/pages/PaymentOptions.tsx b/packages/demobank-ui/src/pages/PaymentOptions.tsx
index e0ad64e64..78e55928d 100644
--- a/packages/demobank-ui/src/pages/PaymentOptions.tsx
+++ b/packages/demobank-ui/src/pages/PaymentOptions.tsx
@@ -17,15 +17,11 @@
 import { AmountJson } from "@gnu-taler/taler-util";
 import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { h, VNode } from "preact";
-import { StateUpdater, useState } from "preact/hooks";
-import {
-  notifyError,
-  notifyInfo,
-  PageStateType,
-  usePageContext,
-} from "../context/pageState.js";
+import { useState } from "preact/hooks";
+import { notifyInfo } from "../hooks/notification.js";
 import { PaytoWireTransferForm } from "./PaytoWireTransferForm.js";
 import { WalletWithdrawForm } from "./WalletWithdrawForm.js";
+import { useSettings } from "../hooks/settings.js";
 
 /**
  * Let the user choose a payment option,
@@ -33,7 +29,7 @@ import { WalletWithdrawForm } from "./WalletWithdrawForm.js";
  */
 export function PaymentOptions({ limit }: { limit: AmountJson }): VNode {
   const { i18n } = useTranslationContext();
-  const { pageStateSetter } = usePageContext();
+  const [settings, updateSettings] = useSettings();
 
   const [tab, setTab] = useState<"charge-wallet" | "wire-transfer">(
     "charge-wallet",
@@ -66,10 +62,8 @@ export function PaymentOptions({ limit }: { limit: AmountJson }): VNode {
             <WalletWithdrawForm
               focus
               limit={limit}
-              onSuccess={(currentWithdrawalOperationId) => {
-                pageStateSetter({
-                  currentWithdrawalOperationId,
-                });
+              onSuccess={(id) => {
+                updateSettings("currentWithdrawalOperationId", id);
               }}
             />
           </div>
diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
index 5f16fbf6b..0bdceddb1 100644
--- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
+++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx
@@ -29,11 +29,7 @@ import {
 } from "@gnu-taler/web-util/lib/index.browser";
 import { h, VNode } from "preact";
 import { useEffect, useRef, useState } from "preact/hooks";
-import {
-  notifyError,
-  ObservedStateType,
-  PageStateType,
-} from "../context/pageState.js";
+import { notifyError } from "../hooks/notification.js";
 import { useAccessAPI } from "../hooks/access.js";
 import {
   buildRequestErrorMessage,
diff --git a/packages/demobank-ui/src/pages/PublicHistoriesPage.tsx b/packages/demobank-ui/src/pages/PublicHistoriesPage.tsx
index 290fd0a79..256653dc5 100644
--- a/packages/demobank-ui/src/pages/PublicHistoriesPage.tsx
+++ b/packages/demobank-ui/src/pages/PublicHistoriesPage.tsx
@@ -15,33 +15,15 @@
  */
 
 import { Logger } from "@gnu-taler/taler-util";
-import {
-  HttpResponsePaginated,
-  useLocalStorage,
-  useTranslationContext,
-} from "@gnu-taler/web-util/lib/index.browser";
-import { Fragment, h, VNode } from "preact";
-import { StateUpdater } from "preact/hooks";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
+import { Fragment, VNode, h } from "preact";
+import { useState } from "preact/hooks";
 import { Transactions } from "../components/Transactions/index.js";
 import { usePublicAccounts } from "../hooks/access.js";
-import {
-  PageStateType,
-  notifyError,
-  usePageContext,
-} from "../context/pageState.js";
 import { handleNotOkResult } from "./HomePage.js";
-import { Loading } from "../components/Loading.js";
 
 const logger = new Logger("PublicHistoriesPage");
 
-// export function PublicHistoriesPage2(): VNode {
-//   return (
-//     <BankFrame>
-//       <PublicHistories />
-//     </BankFrame>
-//   );
-// }
-
 interface Props {
   onLoadNotOk: () => void;
 }
@@ -50,10 +32,16 @@ interface Props {
  * Show histories of public accounts.
  */
 export function PublicHistoriesPage({ onLoadNotOk }: Props): VNode {
-  const [showAccount, setShowAccount] = useShowPublicAccount();
   const { i18n } = useTranslationContext();
 
   const result = usePublicAccounts();
+
+  const [showAccount, setShowAccount] = useState(
+    result.ok && result.data.publicAccounts.length > 0
+      ? result.data.publicAccounts[0].accountLabel
+      : undefined,
+  );
+
   if (!result.ok) {
     onLoadNotOk();
     return handleNotOkResult(i18n)(result);
@@ -64,13 +52,6 @@ export function PublicHistoriesPage({ onLoadNotOk }: Props): VNode {
   const txs: Record<string, h.JSX.Element> = {};
   const accountsBar = [];
 
-  /**
-   * Show the account specified in the props, or just one
-   * from the list if that's not given.
-   */
-  if (typeof showAccount === "undefined" && data.publicAccounts.length > 0) {
-    setShowAccount(data.publicAccounts[1].accountLabel);
-  }
   logger.trace(`Public history tab: ${showAccount}`);
 
   // Ask story of all the public accounts.
@@ -119,23 +100,3 @@ export function PublicHistoriesPage({ onLoadNotOk }: Props): VNode {
     </Fragment>
   );
 }
-
-/**
- * Stores in the state a object containing a 'username'
- * and 'password' field, in order to avoid losing the
- * handle of the data entered by the user in <input> fields.
- */
-function useShowPublicAccount(
-  state?: string,
-): [string | undefined, StateUpdater<string | undefined>] {
-  const ret = useLocalStorage("show-public-account", JSON.stringify(state));
-  const retObj: string | undefined = ret[0] ? JSON.parse(ret[0]) : ret[0];
-  const retSetter: StateUpdater<string | undefined> = function (val) {
-    const newVal =
-      val instanceof Function
-        ? JSON.stringify(val(retObj))
-        : JSON.stringify(val);
-    ret[1](newVal);
-  };
-  return [retObj, retSetter];
-}
diff --git a/packages/demobank-ui/src/pages/RegistrationPage.tsx b/packages/demobank-ui/src/pages/RegistrationPage.tsx
index 5b9584dde..525fefbf5 100644
--- a/packages/demobank-ui/src/pages/RegistrationPage.tsx
+++ b/packages/demobank-ui/src/pages/RegistrationPage.tsx
@@ -18,15 +18,11 @@ import {
   RequestError,
   useTranslationContext,
 } from "@gnu-taler/web-util/lib/index.browser";
-import { Fragment, h, VNode } from "preact";
+import { Fragment, VNode, h } from "preact";
 import { useState } from "preact/hooks";
 import { useBackendContext } from "../context/backend.js";
-import {
-  PageStateType,
-  notifyError,
-  usePageContext,
-} from "../context/pageState.js";
 import { useTestingAPI } from "../hooks/access.js";
+import { notifyError } from "../hooks/notification.js";
 import { bankUiSettings } from "../settings.js";
 import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js";
 import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
diff --git a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
index 7f3e207ac..c57a9b9c2 100644
--- a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
+++ b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
@@ -25,14 +25,10 @@ import {
   RequestError,
   useTranslationContext,
 } from "@gnu-taler/web-util/lib/index.browser";
-import { h, VNode } from "preact";
+import { VNode, h } from "preact";
 import { useEffect, useRef, useState } from "preact/hooks";
-import {
-  ObservedStateType,
-  PageStateType,
-  notifyError,
-} from "../context/pageState.js";
 import { useAccessAPI } from "../hooks/access.js";
+import { notifyError } from "../hooks/notification.js";
 import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js";
 import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
 
diff --git a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
index 10a37cd88..772b07b5f 100644
--- a/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
+++ b/packages/demobank-ui/src/pages/WithdrawalConfirmationQuestion.tsx
@@ -23,14 +23,10 @@ import {
   RequestError,
   useTranslationContext,
 } from "@gnu-taler/web-util/lib/index.browser";
-import { Fragment, h, VNode } from "preact";
+import { Fragment, VNode, h } from "preact";
 import { useMemo, useState } from "preact/hooks";
-import {
-  ObservedStateType,
-  PageStateType,
-  notifyError,
-} from "../context/pageState.js";
 import { useAccessAnonAPI } from "../hooks/access.js";
+import { notifyError } from "../hooks/notification.js";
 import { buildRequestErrorMessage, undefinedIfEmpty } from "../utils.js";
 import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
 
diff --git a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
index a20b2e90d..826578ffc 100644
--- a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
+++ b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
@@ -21,20 +21,15 @@ import {
 } from "@gnu-taler/taler-util";
 import {
   ErrorType,
-  HttpResponsePaginated,
   useTranslationContext,
 } from "@gnu-taler/web-util/lib/index.browser";
-import { Fragment, h, VNode } from "preact";
+import { Fragment, VNode, h } from "preact";
 import { Loading } from "../components/Loading.js";
-import {
-  ObservedStateType,
-  notifyError,
-  notifyInfo,
-} from "../context/pageState.js";
 import { useWithdrawalDetails } from "../hooks/access.js";
+import { notifyInfo } from "../hooks/notification.js";
+import { handleNotOkResult } from "./HomePage.js";
 import { QrCodeSection } from "./QrCodeSection.js";
 import { WithdrawalConfirmationQuestion } from "./WithdrawalConfirmationQuestion.js";
-import { handleNotOkResult } from "./HomePage.js";
 
 const logger = new Logger("WithdrawalQRCode");
 
diff --git a/packages/demobank-ui/src/utils.ts b/packages/demobank-ui/src/utils.ts
index af0329555..e0aac8ecb 100644
--- a/packages/demobank-ui/src/utils.ts
+++ b/packages/demobank-ui/src/utils.ts
@@ -20,7 +20,7 @@ import {
   HttpError,
   useTranslationContext,
 } from "@gnu-taler/web-util/lib/index.browser";
-import { ErrorMessage } from "./context/pageState.js";
+import { ErrorMessage } from "./hooks/notification.js";
 
 /**
  * Validate (the number part of) an amount.  If needed,