fix #8564

11 files changed, 90 insertions, 69 deletions

diff --git a/packages/merchant-backend-ui/build.mjs b/packages/merchant-backend-ui/build.mjs
index bb1dd3ebf..e72113dc5 100755
--- a/packages/merchant-backend-ui/build.mjs
+++ b/packages/merchant-backend-ui/build.mjs
@@ -135,7 +135,7 @@ export const buildConfig = {
     '.woff2': 'file',
     '.eot': 'file',
   },
-  target: ["es6"],
+  target: ["es2020"],
   format: "iife",
   platform: "browser",
   sourcemap: false,
@@ -175,7 +175,7 @@ export const testingConfig = {
     '.woff2': 'file',
     '.eot': 'file',
   },
-  target: ["es6"],
+  target: ["es2020"],
   format: "iife",
   platform: "node",
   sourcemap: true,
diff --git a/packages/merchant-backend-ui/tsconfig.json b/packages/merchant-backend-ui/tsconfig.json
index 7a4d70a17..d9cd57c4e 100644
--- a/packages/merchant-backend-ui/tsconfig.json
+++ b/packages/merchant-backend-ui/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
       /* Basic Options */
-      "target": "ES6",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
+      "target": "ES2020",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
       "module": "ESNext",                       /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
       // "lib": [],                             /* Specify library files to be included in the compilation:  */
       "allowJs": true,                          /* Allow javascript files to be compiled. */
diff --git a/packages/taler-wallet-cli/tsconfig.json b/packages/taler-wallet-cli/tsconfig.json
index 42f0d88a8..4b46790c8 100644
--- a/packages/taler-wallet-cli/tsconfig.json
+++ b/packages/taler-wallet-cli/tsconfig.json
@@ -2,7 +2,7 @@
   "compileOnSave": true,
   "compilerOptions": {
     "composite": true,
-    "target": "ES2018",
+    "target": "ES2020",
     "module": "Node16",
     "moduleResolution": "Node16",
     "sourceMap": true,
diff --git a/packages/taler-wallet-webextension/src/components/Checkbox.tsx b/packages/taler-wallet-webextension/src/components/Checkbox.tsx
index 70dfab597..ec1b93a01 100644
--- a/packages/taler-wallet-webextension/src/components/Checkbox.tsx
+++ b/packages/taler-wallet-webextension/src/components/Checkbox.tsx
@@ -31,6 +31,7 @@ export function Checkbox({
   label,
   description,
 }: Props): VNode {
+
   return (
     <div>
       <input
diff --git a/packages/taler-wallet-webextension/src/hooks/useSettings.ts b/packages/taler-wallet-webextension/src/hooks/useSettings.ts
index 8c9d09caf..37d2f13d7 100644
--- a/packages/taler-wallet-webextension/src/hooks/useSettings.ts
+++ b/packages/taler-wallet-webextension/src/hooks/useSettings.ts
@@ -54,11 +54,11 @@ export function useSettings(): [
   Readonly<Settings>,
   <T extends keyof Settings>(key: T, value: Settings[T]) => void,
 ] {
-  const { value, update } = useLocalStorage(SETTINGS_KEY);
+  const { value, update } = useLocalStorage(SETTINGS_KEY, defaultSettings);
 
-  const parsed: Settings = value ?? defaultSettings;
   function updateField<T extends keyof Settings>(k: T, v: Settings[T]) {
-    update({ ...parsed, [k]: v });
+    update({ ...value, [k]: v });
   }
-  return [parsed, updateField];
+  console.log("ASDeeeeASD")
+  return [value, updateField];
 }
diff --git a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/state.ts b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/state.ts
index e6d46a626..75b8e53c0 100644
--- a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/state.ts
+++ b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/state.ts
@@ -99,42 +99,45 @@ function useUrlState<T>(
   }
   const constHref = href;
 
-  useDebounceEffect(
-    500,
-    constHref == undefined
-      ? undefined
-      : async () => {
-          const req = await fetch(constHref).catch((e) => {
-            return setState({
-              status: "network-error",
-              href: constHref,
-            });
-          });
-          if (!req) return;
+  async function checkURL() {
+    if (!constHref) {
+      return;
+    }
+    const req = await fetch(constHref).catch((e) => {
+      return setState({
+        status: "network-error",
+        href: constHref,
+      });
+    });
+    if (!req) return;
+
+    if (req.status >= 400 && req.status < 500) {
+      setState({
+        status: "client-error",
+        code: req.status,
+      });
+      return;
+    }
+    if (req.status > 500) {
+      setState({
+        status: "server-error",
+        code: req.status,
+      });
+      return;
+    }
 
-          if (req.status >= 400 && req.status < 500) {
-            setState({
-              status: "client-error",
-              code: req.status,
-            });
-            return;
-          }
-          if (req.status > 500) {
-            setState({
-              status: "server-error",
-              code: req.status,
-            });
-            return;
-          }
+    const json = await req.json();
+    try {
+      const result = codec.decode(json);
+      setState({ status: "ok", result });
+    } catch (e: any) {
+      setState({ status: "parsing-error", json });
+    }
+  }
 
-          const json = await req.json();
-          try {
-            const result = codec.decode(json);
-            setState({ status: "ok", result });
-          } catch (e: any) {
-            setState({ status: "parsing-error", json });
-          }
-        },
+  useDebounceEffect(
+    500,
+    constHref == undefined ? undefined : checkURL,
     [host, path],
   );
 
diff --git a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/test.ts b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/test.ts
index 598ca9369..66f64d82e 100644
--- a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/test.ts
+++ b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/test.ts
@@ -45,6 +45,12 @@ describe("AddBackupProvider states", () => {
           expect(state.name.value).eq("");
           expect(state.url.value).eq("");
         },
+        (state) => {
+          expect(state.status).equal("select-provider");
+          if (state.status !== "select-provider") return;
+          expect(state.name.value).eq("");
+          expect(state.url.value).eq("");
+        },
       ],
       TestingContext,
     );
diff --git a/packages/web-util/build.mjs b/packages/web-util/build.mjs
index efcf750bf..02d077571 100755
--- a/packages/web-util/build.mjs
+++ b/packages/web-util/build.mjs
@@ -99,7 +99,7 @@ const buildConfigBase = {
   outdir: "lib",
   bundle: true,
   minify: false,
-  target: ["es2021"],
+  target: ["es2020"],
   loader: {
     ".key": "text",
     ".crt": "text",
diff --git a/packages/web-util/src/hooks/useLocalStorage.ts b/packages/web-util/src/hooks/useLocalStorage.ts
index b460144a6..7c41f98be 100644
--- a/packages/web-util/src/hooks/useLocalStorage.ts
+++ b/packages/web-util/src/hooks/useLocalStorage.ts
@@ -19,7 +19,7 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { Codec, codecForString } from "@gnu-taler/taler-util";
+import { AbsoluteTime, Codec, codecForString } from "@gnu-taler/taler-util";
 import { useEffect, useState } from "preact/hooks";
 import {
   ObservableMap,
@@ -61,12 +61,25 @@ const supportLocalStorage = typeof window !== "undefined";
 const supportBrowserStorage =
   typeof chrome !== "undefined" && typeof chrome.storage !== "undefined";
 
+  /**
+   * Build setting storage
+   */
 const storage: ObservableMap<string, string> = (function buildStorage() {
   if (supportBrowserStorage) {
-    return browserStorageMap(memoryMap<string>());
+    //browser storage is like local storage but
+    //with app sync.
+    //Works for almost every browser
+    if (supportLocalStorage) {
+      return browserStorageMap(localStorageMap());
+    } else {
+      // service worker doesn't have local storage
+      return browserStorageMap(memoryMap<string>());
+    }
   } else if (supportLocalStorage) {
+    // fallback if browser is too old
     return localStorageMap();
   } else {
+    // new need to save settings somewhere
     return memoryMap<string>();
   }
 })();
@@ -85,26 +98,14 @@ export function useLocalStorage<Type = string>(
   key: StorageKey<Type>,
   defaultValue?: Type,
 ): StorageState<Type> {
-  function convert(updated: string | undefined): Type | undefined {
-    if (updated === undefined) return defaultValue; //optional
-    try {
-      return key.codec.decode(JSON.parse(updated));
-    } catch (e) {
-      //decode error
-      return defaultValue;
-    }
-  }
-  const [storedValue, setStoredValue] = useState<Type | undefined>(
-    (): Type | undefined => {
-      const prev = storage.get(key.id);
-      return convert(prev);
-    },
-  );
+  const current = convert(storage.get(key.id), key, defaultValue);
+
+  const [_, setStoredValue] = useState(AbsoluteTime.now().t_ms);
 
   useEffect(() => {
     return storage.onUpdate(key.id, () => {
-      const newValue = storage.get(key.id);
-      setStoredValue(convert(newValue));
+      // const newValue = storage.get(key.id);
+      setStoredValue(AbsoluteTime.now().t_ms);
     });
   }, [key.id]);
 
@@ -120,10 +121,20 @@ export function useLocalStorage<Type = string>(
   };
 
   return {
-    value: storedValue,
+    value: current,
     update: setValue,
     reset: () => {
       setValue(defaultValue);
     },
   };
 }
+
+function convert<Type>(updated: string | undefined, key: StorageKey<Type>, defaultValue?: Type): Type | undefined {
+  if (updated === undefined) return defaultValue; //optional
+  try {
+    return key.codec.decode(JSON.parse(updated));
+  } catch (e) {
+    //decode error
+    return defaultValue;
+  }
+}
diff --git a/packages/web-util/src/index.build.ts b/packages/web-util/src/index.build.ts
index 4a52d1177..c0c5fc179 100644
--- a/packages/web-util/src/index.build.ts
+++ b/packages/web-util/src/index.build.ts
@@ -218,7 +218,7 @@ const defaultEsBuildConfig: esbuild.BuildOptions = {
     ".woff2": "file",
     ".eot": "file",
   },
-  target: ["es6"],
+  target: ["es2020"],
   format: "esm",
   platform: "browser",
   jsxFactory: "h",
diff --git a/packages/web-util/src/utils/observable.ts b/packages/web-util/src/utils/observable.ts
index 01e655eaa..16a33ae72 100644
--- a/packages/web-util/src/utils/observable.ts
+++ b/packages/web-util/src/utils/observable.ts
@@ -118,6 +118,7 @@ export function localStorageMap(): ObservableMap<string, string> {
       const total = localStorage.length;
       return {
         next() {
+          if (index === total) return { done: true, value: undefined };
           const key = localStorage.key(index);
           if (key === null) {
             //we are going from 0 until last, this should not happen
@@ -128,7 +129,6 @@ export function localStorageMap(): ObservableMap<string, string> {
             //the key exist, this should not happen
             throw Error("value cant be null");
           }
-          if (index == total) return { done: true, value: [key, item] };
           index = index + 1;
           return { done: false, value: [key, item] };
         },
@@ -165,12 +165,12 @@ export function localStorageMap(): ObservableMap<string, string> {
       const total = localStorage.length;
       return {
         next() {
+          if (index === total) return { done: true, value: undefined };
           const key = localStorage.key(index);
           if (key === null) {
             //we are going from 0 until last, this should not happen
             throw Error("key cant be null");
           }
-          if (index == total) return { done: true, value: key };
           index = index + 1;
           return { done: false, value: key };
         },
@@ -185,6 +185,7 @@ export function localStorageMap(): ObservableMap<string, string> {
       const total = localStorage.length;
       return {
         next() {
+          if (index === total) return { done: true, value: undefined };
           const key = localStorage.key(index);
           if (key === null) {
             //we are going from 0 until last, this should not happen
@@ -195,7 +196,6 @@ export function localStorageMap(): ObservableMap<string, string> {
             //the key exist, this should not happen
             throw Error("value cant be null");
           }
-          if (index == total) return { done: true, value: item };
           index = index + 1;
           return { done: false, value: item };
         },
@@ -247,11 +247,11 @@ function onBrowserStorageUpdate(cb: (changes: Changes) => void): void {
 export function browserStorageMap(
   backend: ObservableMap<string, string>,
 ): ObservableMap<string, string> {
-  getAllContent().then((content) => {
+  getAllContent().then(content => {
     Object.entries(content ?? {}).forEach(([k, v]) => {
       backend.set(k, v as string);
     });
-  });
+  })
 
   backend.onAnyUpdate(async () => {
     const result: Record<string, string> = {};