1 files changed, 23 insertions, 15 deletions
diff --git a/packages/demobank-ui/src/hooks/settings.ts b/packages/demobank-ui/src/hooks/settings.ts
index 325b583f9..46b31bf2a 100644
--- a/packages/demobank-ui/src/hooks/settings.ts
+++ b/packages/demobank-ui/src/hooks/settings.ts
@@ -14,36 +14,44 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { useLocalStorage } from "@gnu-taler/web-util/browser";
+import {
+  Codec,
+  buildCodecForObject,
+  codecForString,
+  codecOptional,
+} from "@gnu-taler/taler-util";
+import { buildStorageKey, useLocalStorage } from "@gnu-taler/web-util/browser";
 
 interface Settings {
   currentWithdrawalOperationId: string | undefined;
 }
 
+export const codecForSettings = (): Codec<Settings> =>
+  buildCodecForObject<Settings>()
+    .property("currentWithdrawalOperationId", codecOptional(codecForString()))
+    .build("Settings");
+
 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;
-  }
-}
+const DEMOBANK_SETTINGS_KEY = buildStorageKey(
+  "demobank-settings",
+  codecForSettings(),
+);
 
 export function useSettings(): [
   Readonly<Settings>,
   <T extends keyof Settings>(key: T, value: Settings[T]) => void,
 ] {
-  const { value, update } = useLocalStorage("demobank-settings");
+  const { value, update } = useLocalStorage(
+    DEMOBANK_SETTINGS_KEY,
+    defaultSettings,
+  );
 
-  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);
+    const newValue = { ...value, [k]: v };
+    update(newValue);
   }
-  return [parsed, updateField];
+  return [value, updateField];
 }