some changes

using transaction context from web utils
alertContext.safely api change (easier to integrate)
using lang and localstorage from web utils
removing auto permission, from UI
adding settings

packages/taler-wallet-webextension/src/NavigationBar.tsx

@@ -33,12 +33,12 @@ import {
   SvgIcon,
 } from "./components/styled/index.js";
 import { useBackendContext } from "./context/backend.js";
-import { useTranslationContext } from "./context/translation.js";
 import { useAsyncAsHook } from "./hooks/useAsyncAsHook.js";
 import qrIcon from "./svg/qr_code_24px.svg";
 import settingsIcon from "./svg/settings_black_24dp.svg";
 import warningIcon from "./svg/warning_24px.svg";
 import { parseTalerUri, TalerUriAction } from "@gnu-taler/taler-util";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 
 /**
  * List of pages used by the wallet

packages/taler-wallet-webextension/src/components/AmountField.stories.tsx

@@ -22,7 +22,7 @@
 import { AmountJson, Amounts } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { AmountFieldHandler, nullFunction, withSafe } from "../mui/handlers.js";
 import { AmountField } from "./AmountField.js";
 

packages/taler-wallet-webextension/src/components/AmountField.tsx

@@ -25,7 +25,7 @@ import {
 } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { AmountFieldHandler } from "../mui/handlers.js";
 import { TextField } from "../mui/TextField.js";
 

packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx

@@ -23,7 +23,7 @@ import {
 } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useEffect, useRef, useState } from "preact/hooks";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { CopiedIcon, CopyIcon } from "../svg/index.js";
 import { Amount } from "./Amount.js";
 import { ButtonBox, TooltipLeft } from "./styled/index.js";

packages/taler-wallet-webextension/src/components/CurrentAlerts.tsx

@@ -16,12 +16,12 @@
 
 import { ComponentChildren, Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
-import { useTranslationContext } from "../../../web-util/src/index.browser.js";
 import {
   Alert as AlertNotification,
   useAlertContext,
 } from "../context/alert.js";
 import { Alert } from "../mui/Alert.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 
 /**
  *

packages/taler-wallet-webextension/src/components/Diagnostics.tsx

@@ -16,7 +16,7 @@
 
 import { WalletDiagnostics } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 
 interface Props {
   timedOut: boolean;

packages/taler-wallet-webextension/src/components/EditableText.tsx

@@ -16,7 +16,7 @@
 
 import { h, VNode } from "preact";
 import { useRef, useState } from "preact/hooks";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 
 interface Props {
   value: string;

packages/taler-wallet-webextension/src/components/Loading.tsx

@@ -16,7 +16,7 @@
 import { css } from "@linaria/core";
 import { Fragment, h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import ProgressIcon from "../svg/progress.svg";
 import { CenteredText } from "./styled/index.js";
 

packages/taler-wallet-webextension/src/components/Part.tsx

@@ -97,7 +97,7 @@ const CollasibleBox = styled.div`
   }
 `;
 import arrowDown from "../svg/chevron-down.svg";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 
 export function PartCollapsible({ text, title, big, showSign }: Props): VNode {
   const Text = big ? ExtraLargeText : LargeText;

packages/taler-wallet-webextension/src/components/PaymentButtons.tsx

@@ -28,7 +28,7 @@ import { Amount } from "./Amount.js";
 import { Part } from "./Part.js";
 import { QR } from "./QR.js";
 import { LinkSuccess, WarningBox } from "./styled/index.js";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Button } from "../mui/Button.js";
 import { ButtonHandler } from "../mui/handlers.js";
 import { assertUnreachable } from "../utils/index.js";

packages/taler-wallet-webextension/src/components/PendingTransactions.tsx

@@ -24,7 +24,7 @@ import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { Fragment, h, JSX, VNode } from "preact";
 import { useEffect } from "preact/hooks";
 import { useBackendContext } from "../context/backend.js";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
 import { Avatar } from "../mui/Avatar.js";
 import { Grid } from "../mui/Grid.js";

packages/taler-wallet-webextension/src/components/ProductList.tsx

@@ -17,7 +17,7 @@
 import { Amounts, Product } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { SmallLightText } from "./styled/index.js";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 
 export function ProductList({ products }: { products: Product[] }): VNode {
   const { i18n } = useTranslationContext();

packages/taler-wallet-webextension/src/components/SelectList.tsx

@@ -16,7 +16,7 @@
 
 import { TranslatedString } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { NiceSelect } from "./styled/index.js";
 
 interface Props {

packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.tsx

@@ -26,7 +26,7 @@ import { Modal } from "../components/Modal.js";
 import { Time } from "../components/Time.js";
 import { alertFromError, useAlertContext } from "../context/alert.js";
 import { useBackendContext } from "../context/backend.js";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { HookError, useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
 import { ButtonHandler } from "../mui/handlers.js";
 import { compose, StateViewMap } from "../utils/index.js";

packages/taler-wallet-webextension/src/components/TermsOfService/state.ts

@@ -15,10 +15,10 @@
  */
 
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { useState } from "preact/hooks";
 import { alertFromError, useAlertContext } from "../../context/alert.js";
 import { useBackendContext } from "../../context/backend.js";
-import { useTranslationContext } from "../../context/translation.js";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { Props, State } from "./index.js";
 import { buildTermsOfServiceState } from "./utils.js";

packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx

@@ -24,7 +24,7 @@ import {
   WarningBox,
   WarningText,
 } from "../../components/styled/index.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Button } from "../../mui/Button.js";
 import { State } from "./index.js";
 

packages/taler-wallet-webextension/src/components/TransactionItem.tsx

@@ -25,7 +25,7 @@ import {
   ExtendedStatus,
 } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Avatar } from "../mui/Avatar.js";
 import { Pages } from "../NavigationBar.js";
 import { assertUnreachable } from "../utils/index.js";

packages/taler-wallet-webextension/src/context/alert.ts

@@ -25,6 +25,7 @@ import { useContext, useState } from "preact/hooks";
 import { HookError } from "../hooks/useAsyncAsHook.js";
 import { SafeHandler, withSafe } from "../mui/handlers.js";
 import { BackgroundError } from "../wxApi.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 
 export type AlertType = "info" | "warning" | "error" | "success";
 
@@ -55,10 +56,7 @@ type Type = {
    * @deprecated use safely
    */
   pushAlertOnError: <T>(h: (p: T) => Promise<void>) => SafeHandler<T>;
-  safely: <T>(
+  safely: <T>(name: string, h: (p: T) => Promise<void>) => SafeHandler<T>;
-    h: (p: T) => Promise<void>,
-    error: TranslatedString,
-  ) => SafeHandler<T>;
 };
 
 const initial: Type = {
@@ -113,10 +111,13 @@ export const AlertProvider = ({ children }: Props): VNode => {
     });
   }
 
+  const { i18n } = useTranslationContext();
+
   function safely<T>(
+    name: string,
     handler: (p: T) => Promise<void>,
-    message: TranslatedString,
   ): SafeHandler<T> {
+    const message = i18n.str`Error was thrown trying to: "${name}"`;
     return withSafe(handler, (e) => {
       const a = alertFromError(message, e);
       pushAlert(a);

packages/taler-wallet-webextension/src/context/translation.ts

@@ -1,92 +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/>
- */
-
-/**
- *
- * @author Sebastian Javier Marchano (sebasjm)
- */
-
-import { i18n, setupI18n } from "@gnu-taler/taler-util";
-import { createContext, h, VNode } from "preact";
-import { useContext, useEffect } from "preact/hooks";
-import { useLang } from "../hooks/useLang.js";
-import { strings } from "../i18n/strings.js";
-
-interface Type {
-  lang: string;
-  supportedLang: { [id in keyof typeof supportedLang]: string };
-  changeLanguage: (l: string) => void;
-  i18n: typeof i18n;
-  isSaved: boolean;
-}
-
-const supportedLang = {
-  es: "Español [es]",
-  ja: "日本語 [ja]",
-  en: "English [en]",
-  fr: "Français [fr]",
-  de: "Deutsch [de]",
-  sv: "Svenska [sv]",
-  it: "Italiano [it]",
-  // ko: "한국어 [ko]",
-  // ru: "Ру́сский язы́к [ru]",
-  tr: "Türk [tr]",
-  navigator: "Defined by navigator",
-};
-
-const initial = {
-  lang: "en",
-  supportedLang,
-  changeLanguage: () => {
-    // do not change anything
-  },
-  i18n,
-  isSaved: false,
-};
-const Context = createContext<Type>(initial);
-
-interface Props {
-  initial?: string;
-  children: any;
-  forceLang?: string;
-}
-
-export const TranslationProvider = ({
-  initial,
-  children,
-  forceLang,
-}: Props): VNode => {
-  const [lang, changeLanguage, isSaved] = useLang(initial);
-  useEffect(() => {
-    if (forceLang) {
-      changeLanguage(forceLang);
-    }
-  });
-  useEffect(() => {
-    setupI18n(lang, strings);
-  }, [lang]);
-  if (forceLang) {
-    setupI18n(forceLang, strings);
-  } else {
-    setupI18n(lang, strings);
-  }
-  return h(Context.Provider, {
-    value: { lang, changeLanguage, supportedLang, i18n, isSaved },
-    children,
-  });
-};
-
-export const useTranslationContext = (): Type => useContext(Context);

packages/taler-wallet-webextension/src/cta/Deposit/state.ts

@@ -18,7 +18,7 @@ import { Amounts } from "@gnu-taler/taler-util";
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { alertFromError, useAlertContext } from "../../context/alert.js";
 import { useBackendContext } from "../../context/backend.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { Props, State } from "./index.js";
 

packages/taler-wallet-webextension/src/cta/Deposit/views.tsx

@@ -20,7 +20,7 @@ import { Amount } from "../../components/Amount.js";
 import { LogoHeader } from "../../components/LogoHeader.js";
 import { Part } from "../../components/Part.js";
 import { SubTitle, WalletAction } from "../../components/styled/index.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Button } from "../../mui/Button.js";
 import { State } from "./index.js";
 

packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts

@@ -21,7 +21,7 @@ import { isFuture, parse } from "date-fns";
 import { useState } from "preact/hooks";
 import { alertFromError, useAlertContext } from "../../context/alert.js";
 import { useBackendContext } from "../../context/backend.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { useSelectedExchange } from "../../hooks/useSelectedExchange.js";
 import { RecursiveState } from "../../utils/index.js";

packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx

@@ -24,7 +24,7 @@ import {
   SvgIcon,
   WalletAction,
 } from "../../components/styled/index.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Button } from "../../mui/Button.js";
 import { TextField } from "../../mui/TextField.js";
 import editIcon from "../../svg/edit_24px.svg";

packages/taler-wallet-webextension/src/cta/InvoicePay/state.ts

@@ -26,7 +26,7 @@ import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { useEffect } from "preact/hooks";
 import { alertFromError, useAlertContext } from "../../context/alert.js";
 import { useBackendContext } from "../../context/backend.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { Props, State } from "./index.js";
 

packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx

@@ -21,7 +21,7 @@ import { Part } from "../../components/Part.js";
 import { PaymentButtons } from "../../components/PaymentButtons.js";
 import { SubTitle, WalletAction } from "../../components/styled/index.js";
 import { Time } from "../../components/Time.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { getAmountWithFee, InvoiceDetails } from "../../wallet/Transaction.js";
 import { State } from "./index.js";
 

packages/taler-wallet-webextension/src/cta/Payment/state.ts

@@ -24,7 +24,7 @@ import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { useEffect } from "preact/hooks";
 import { alertFromError, useAlertContext } from "../../context/alert.js";
 import { useBackendContext } from "../../context/backend.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { ButtonHandler } from "../../mui/handlers.js";
 import { Props, State } from "./index.js";

packages/taler-wallet-webextension/src/cta/Payment/test.ts

@@ -31,7 +31,7 @@ import {
 } from "@gnu-taler/taler-util";
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { expect } from "chai";
-import { tests } from "../../../../web-util/src/index.browser.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
 import { ErrorAlert, useAlertContext } from "../../context/alert.js";
 import { nullFunction } from "../../mui/handlers.js";
 import { createWalletApiMock } from "../../test-utils.js";

packages/taler-wallet-webextension/src/cta/Payment/views.tsx

@@ -26,7 +26,7 @@ import { Part } from "../../components/Part.js";
 import { PaymentButtons } from "../../components/PaymentButtons.js";
 import { SuccessBox, WarningBox } from "../../components/styled/index.js";
 import { Time } from "../../components/Time.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import {
   getAmountWithFee,
   MerchantDetails,

packages/taler-wallet-webextension/src/cta/PaymentTemplate/state.ts

@@ -19,7 +19,7 @@ import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { useState } from "preact/hooks";
 import { alertFromError, useAlertContext } from "../../context/alert.js";
 import { useBackendContext } from "../../context/backend.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { AmountFieldHandler, TextFieldHandler } from "../../mui/handlers.js";
 import { Props, State } from "./index.js";
@@ -157,7 +157,7 @@ export function useComponentState({
     onCreate: {
       onClick: errors
         ? undefined
-        : safely(createOrder, i18n.str`Could not create order`),
+        : safely("create order for pay template", createOrder),
     },
   };
 }

packages/taler-wallet-webextension/src/cta/PaymentTemplate/test.ts

@@ -20,7 +20,7 @@
  */
 
 import { expect } from "chai";
-import { tests } from "../../../../web-util/src/index.browser.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
 import { nullFunction } from "../../mui/handlers.js";
 import { createWalletApiMock } from "../../test-utils.js";
 import { useComponentState } from "./state.js";

packages/taler-wallet-webextension/src/cta/PaymentTemplate/views.tsx

@@ -17,7 +17,7 @@
 import { Fragment, h, VNode } from "preact";
 import { AmountField } from "../../components/AmountField.js";
 import { Part } from "../../components/Part.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Button } from "../../mui/Button.js";
 import { TextField } from "../../mui/TextField.js";
 import { State } from "./index.js";

packages/taler-wallet-webextension/src/cta/Recovery/state.ts

@@ -18,7 +18,7 @@ import { parseRestoreUri } from "@gnu-taler/taler-util";
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { useAlertContext } from "../../context/alert.js";
 import { useBackendContext } from "../../context/backend.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Props, State } from "./index.js";
 
 export function useComponentState({

packages/taler-wallet-webextension/src/cta/Recovery/views.tsx

@@ -17,7 +17,7 @@
 import { Fragment, h, VNode } from "preact";
 import { LogoHeader } from "../../components/LogoHeader.js";
 import { SubTitle, WalletAction } from "../../components/styled/index.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Button } from "../../mui/Button.js";
 import { State } from "./index.js";
 

packages/taler-wallet-webextension/src/cta/Refund/state.ts

@@ -19,7 +19,7 @@ import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { useEffect, useState } from "preact/hooks";
 import { alertFromError, useAlertContext } from "../../context/alert.js";
 import { useBackendContext } from "../../context/backend.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { Props, State } from "./index.js";
 

packages/taler-wallet-webextension/src/cta/Refund/test.ts

@@ -26,7 +26,7 @@ import {
 } from "@gnu-taler/taler-util";
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { expect } from "chai";
-import { tests } from "../../../../web-util/src/index.browser.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
 import { nullFunction } from "../../mui/handlers.js";
 import { createWalletApiMock } from "../../test-utils.js";
 import { useComponentState } from "./state.js";

packages/taler-wallet-webextension/src/cta/Refund/views.tsx

@@ -21,7 +21,7 @@ import { LogoHeader } from "../../components/LogoHeader.js";
 import { Part } from "../../components/Part.js";
 import { ProductList } from "../../components/ProductList.js";
 import { Link, SubTitle, WalletAction } from "../../components/styled/index.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Button } from "../../mui/Button.js";
 import { State } from "./index.js";
 

packages/taler-wallet-webextension/src/cta/Tip/state.ts

@@ -18,7 +18,7 @@ import { Amounts } from "@gnu-taler/taler-util";
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { alertFromError, useAlertContext } from "../../context/alert.js";
 import { useBackendContext } from "../../context/backend.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { Props, State } from "./index.js";
 

packages/taler-wallet-webextension/src/cta/Tip/test.ts

@@ -22,7 +22,7 @@
 import { Amounts } from "@gnu-taler/taler-util";
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { expect } from "chai";
-import { tests } from "../../../../web-util/src/index.browser.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
 import { nullFunction } from "../../mui/handlers.js";
 import { createWalletApiMock } from "../../test-utils.js";
 import { Props } from "./index.js";

packages/taler-wallet-webextension/src/cta/Tip/views.tsx

@@ -20,7 +20,7 @@ import { Amount } from "../../components/Amount.js";
 import { LogoHeader } from "../../components/LogoHeader.js";
 import { Part } from "../../components/Part.js";
 import { Link, SubTitle, WalletAction } from "../../components/styled/index.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Button } from "../../mui/Button.js";
 import { State } from "./index.js";
 

packages/taler-wallet-webextension/src/cta/TransferCreate/state.ts

@@ -20,7 +20,7 @@ import { isFuture, parse } from "date-fns";
 import { useState } from "preact/hooks";
 import { alertFromError, useAlertContext } from "../../context/alert.js";
 import { useBackendContext } from "../../context/backend.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { Props, State } from "./index.js";
 

packages/taler-wallet-webextension/src/cta/TransferCreate/views.tsx

@@ -21,7 +21,7 @@ import { ErrorTalerOperation } from "../../components/ErrorTalerOperation.js";
 import { LogoHeader } from "../../components/LogoHeader.js";
 import { Part } from "../../components/Part.js";
 import { Link, SubTitle, WalletAction } from "../../components/styled/index.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Button } from "../../mui/Button.js";
 import { TextField } from "../../mui/TextField.js";
 import { getAmountWithFee, TransferDetails } from "../../wallet/Transaction.js";

packages/taler-wallet-webextension/src/cta/TransferPickup/state.ts

@@ -22,7 +22,7 @@ import {
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { alertFromError, useAlertContext } from "../../context/alert.js";
 import { useBackendContext } from "../../context/backend.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { Props, State } from "./index.js";
 

packages/taler-wallet-webextension/src/cta/TransferPickup/views.tsx

@@ -21,7 +21,7 @@ import { LogoHeader } from "../../components/LogoHeader.js";
 import { Part } from "../../components/Part.js";
 import { Link, SubTitle, WalletAction } from "../../components/styled/index.js";
 import { Time } from "../../components/Time.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Button } from "../../mui/Button.js";
 import { getAmountWithFee, TransferDetails } from "../../wallet/Transaction.js";
 import { State } from "./index.js";

packages/taler-wallet-webextension/src/cta/Withdraw/state.ts

@@ -26,7 +26,7 @@ import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { useState } from "preact/hooks";
 import { alertFromError, useAlertContext } from "../../context/alert.js";
 import { useBackendContext } from "../../context/backend.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { useSelectedExchange } from "../../hooks/useSelectedExchange.js";
 import { RecursiveState } from "../../utils/index.js";

packages/taler-wallet-webextension/src/cta/Withdraw/test.ts

@@ -27,7 +27,7 @@ import {
 } from "@gnu-taler/taler-util";
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { expect } from "chai";
-import { tests } from "../../../../web-util/src/index.browser.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
 import { createWalletApiMock } from "../../test-utils.js";
 import { useComponentStateFromURI } from "./state.js";
 

packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx

@@ -23,7 +23,7 @@ import { QR } from "../../components/QR.js";
 import { SelectList } from "../../components/SelectList.js";
 import { Input, LinkSuccess, SvgIcon } from "../../components/styled/index.js";
 import { TermsOfService } from "../../components/TermsOfService/index.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Button } from "../../mui/Button.js";
 import editIcon from "../../svg/edit_24px.svg";
 import {

packages/taler-wallet-webextension/src/hooks/useAutoOpenPermissions.ts

@@ -1,70 +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 { useEffect, useState } from "preact/hooks";
-import { useAlertContext } from "../context/alert.js";
-import { useBackendContext } from "../context/backend.js";
-import { ToggleHandler } from "../mui/handlers.js";
-import { platform } from "../platform/foreground.js";
-
-export function useAutoOpenPermissions(): ToggleHandler {
-  const api = useBackendContext();
-  const { pushAlertOnError } = useAlertContext();
-  const [enabled, setEnabled] = useState(false);
-
-  async function handleAutoOpenPerm(): Promise<void> {
-    if (!enabled) {
-      // We set permissions here, since apparently FF wants this to be done
-      // as the result of an input event ...
-      let granted: boolean;
-      try {
-        granted = await platform.getPermissionsApi().requestHostPermissions();
-      } catch (lastError) {
-        setEnabled(false);
-        throw lastError;
-      }
-      const res = await api.background.call("toggleHeaderListener", granted);
-      setEnabled(res.newValue);
-    } else {
-      try {
-        await api.background
-          .call("toggleHeaderListener", false)
-          .then((r) => setEnabled(r.newValue));
-      } catch (e) {
-        console.log(e);
-      }
-    }
-    return;
-  }
-
-  useEffect(() => {
-    async function getValue(): Promise<void> {
-      const res = await api.background.call(
-        "containsHeaderListener",
-        undefined,
-      );
-      setEnabled(res.newValue);
-    }
-    getValue();
-  }, []);
-
-  return {
-    value: enabled,
-    button: {
-      onClick: pushAlertOnError(handleAutoOpenPerm),
-    },
-  };
-}

packages/taler-wallet-webextension/src/hooks/useLang.ts

@@ -1,31 +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 { useNotNullLocalStorage } from "./useLocalStorage.js";
-
-function getBrowserLang(): string | undefined {
-  if (typeof window === "undefined") return undefined;
-  if (window.navigator.languages) return window.navigator.languages[0];
-  if (window.navigator.language) return window.navigator.language;
-  return undefined;
-}
-
-export function useLang(
-  initial?: string,
-): [string, (s: string) => void, boolean] {
-  const defaultLang = (getBrowserLang() || initial || "en").substring(0, 2);
-  return useNotNullLocalStorage("lang-preference", defaultLang);
-}

packages/taler-wallet-webextension/src/hooks/useLocalStorage.ts

@@ -1,83 +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/>
- */
-
-/**
- *
- * @author Sebastian Javier Marchano (sebasjm)
- */
-
-import { StateUpdater, useState } from "preact/hooks";
-
-export function useLocalStorage(
-  key: string,
-  initialValue?: string,
-): [string | undefined, StateUpdater<string | undefined>] {
-  const [storedValue, setStoredValue] = useState<string | undefined>(
-    (): string | undefined => {
-      return typeof window !== "undefined"
-        ? window.localStorage.getItem(key) || initialValue
-        : initialValue;
-    },
-  );
-
-  const setValue = (
-    value?: string | ((val?: string) => string | undefined),
-  ): void => {
-    setStoredValue((p) => {
-      const toStore = value instanceof Function ? value(p) : value;
-      if (typeof window !== "undefined") {
-        if (!toStore) {
-          window.localStorage.removeItem(key);
-        } else {
-          window.localStorage.setItem(key, toStore);
-        }
-      }
-      return toStore;
-    });
-  };
-
-  return [storedValue, setValue];
-}
-
-//TODO: merge with the above function
-export function useNotNullLocalStorage(
-  key: string,
-  initialValue: string,
-): [string, StateUpdater<string>, boolean] {
-  const [storedValue, setStoredValue] = useState<string>((): string => {
-    return typeof window !== "undefined"
-      ? window.localStorage.getItem(key) || initialValue
-      : initialValue;
-  });
-
-  const setValue = (value: string | ((val: string) => string)): void => {
-    const valueToStore = value instanceof Function ? value(storedValue) : value;
-    setStoredValue(valueToStore);
-    if (typeof window !== "undefined") {
-      if (!valueToStore) {
-        window.localStorage.removeItem(key);
-      } else {
-        window.localStorage.setItem(key, valueToStore);
-      }
-    }
-  };
-
-  const isSaved =
-    typeof window === "undefined"
-      ? false
-      : window.localStorage.getItem(key) !== null;
-  return [storedValue, setValue, isSaved];
-}

packages/taler-wallet-webextension/src/hooks/useSettings.ts

@@ -0,0 +1,51 @@
+/*
+ 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 {
+  injectTalerSupport: boolean;
+}
+
+const defaultSettings: Settings = {
+  injectTalerSupport: false,
+};
+
+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("wallet-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 };
+    console.log("should update", k, v, parsed, newValue);
+    const json = JSON.stringify(newValue);
+    console.log(json);
+    update(json);
+  }
+  return [parsed, updateField];
+}

packages/taler-wallet-webextension/src/mui/Typography.tsx

@@ -15,7 +15,7 @@
  */
 import { css } from "@linaria/core";
 import { ComponentChildren, h, VNode } from "preact";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 // eslint-disable-next-line import/extensions
 import { theme } from "./style.js";
 

packages/taler-wallet-webextension/src/popup/Application.tsx

@@ -32,7 +32,7 @@ import { IoCProviderForRuntime } from "../context/iocContext.js";
 import {
   TranslationProvider,
   useTranslationContext,
-} from "../context/translation.js";
+} from "@gnu-taler/web-util/lib/index.browser";
 import { useTalerActionURL } from "../hooks/useTalerActionURL.js";
 import { Pages, PopupNavBar, PopupNavBarOptions } from "../NavigationBar.js";
 import { platform } from "../platform/foreground.js";
@@ -40,10 +40,11 @@ import { BackupPage } from "../wallet/BackupPage.js";
 import { ProviderDetailPage } from "../wallet/ProviderDetailPage.js";
 import { BalancePage } from "./BalancePage.js";
 import { TalerActionFound } from "./TalerActionFound.js";
+import { strings } from "../i18n/strings.js";
 
 export function Application(): VNode {
   return (
-    <TranslationProvider>
+    <TranslationProvider source={strings}>
       <DevContextProvider>
         <IoCProviderForRuntime>
           <ApplicationView />

packages/taler-wallet-webextension/src/popup/BalancePage.tsx

@@ -28,7 +28,7 @@ import {
   useAlertContext,
 } from "../context/alert.js";
 import { useBackendContext } from "../context/backend.js";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
 import { Button } from "../mui/Button.js";
 import { ButtonHandler } from "../mui/handlers.js";

packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx

@@ -15,7 +15,7 @@
  */
 import { css } from "@linaria/core";
 import { Fragment, h, VNode } from "preact";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Alert } from "../mui/Alert.js";
 import { Button } from "../mui/Button.js";
 import { ButtonHandler } from "../mui/handlers.js";

packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx

@@ -22,7 +22,7 @@
 import { classifyTalerUri, TalerUriType } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { Title } from "../components/styled/index.js";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Button } from "../mui/Button.js";
 import { platform } from "../platform/foreground.js";
 

packages/taler-wallet-webextension/src/test-utils.ts

@@ -25,17 +25,18 @@ import {
   ComponentChildren,
   Fragment,
   FunctionalComponent,
+  VNode,
   h as create,
   options,
   render as renderIntoDom,
-  VNode,
 } from "preact";
 import { render as renderToString } from "preact-render-to-string";
 import { AlertProvider } from "./context/alert.js";
 import { BackendProvider } from "./context/backend.js";
-import { TranslationProvider } from "./context/translation.js";
 import { nullFunction } from "./mui/handlers.js";
 import { BackgroundApiClient, wxApi } from "./wxApi.js";
+import { TranslationProvider } from "@gnu-taler/web-util/lib/index.browser";
+import { strings } from "./i18n/strings.js";
 
 // When doing tests we want the requestAnimationFrame to be as fast as possible.
 // without this option the RAF will timeout after 100ms making the tests slower
@@ -368,7 +369,11 @@ export function createWalletApiMock(): {
   }): VNode {
     let children = _cs;
     children = create(AlertProvider, { children }, children);
-    children = create(TranslationProvider, { children }, children);
+    children = create(
+      TranslationProvider,
+      { children, source: strings, initial: "en", forceLang: "en" },
+      children,
+    );
     return create(
       BackendProvider,
       {

packages/taler-wallet-webextension/src/wallet/AddBackupProvider/test.ts

@@ -20,7 +20,7 @@
  */
 
 import { expect } from "chai";
-import { tests } from "../../../../web-util/src/index.browser.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
 import { nullFunction } from "../../mui/handlers.js";
 import { createWalletApiMock } from "../../test-utils.js";
 import { Props } from "./index.js";

packages/taler-wallet-webextension/src/wallet/AddBackupProvider/views.tsx

@@ -23,7 +23,7 @@ import {
   SubTitle,
   Title,
 } from "../../components/styled/index.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Button } from "../../mui/Button.js";
 import { TextField } from "../../mui/TextField.js";
 import { State } from "./index.js";

packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx

@@ -18,7 +18,7 @@ import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { platform } from "../platform/foreground.js";
 import { InputWithLabel } from "../components/styled/index.js";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Button } from "../mui/Button.js";
 
 export interface Props {

packages/taler-wallet-webextension/src/wallet/Application.tsx

@@ -44,7 +44,7 @@ import { IoCProviderForRuntime } from "../context/iocContext.js";
 import {
   TranslationProvider,
   useTranslationContext,
-} from "../context/translation.js";
+} from "@gnu-taler/web-util/lib/index.browser";
 import { DepositPage as DepositPageCTA } from "../cta/Deposit/index.js";
 import { InvoiceCreatePage } from "../cta/InvoiceCreate/index.js";
 import { InvoicePayPage } from "../cta/InvoicePay/index.js";
@@ -80,6 +80,7 @@ import { QrReaderPage } from "./QrReader.js";
 import { SettingsPage } from "./Settings.js";
 import { TransactionPage } from "./Transaction.js";
 import { WelcomePage } from "./Welcome.js";
+import { strings } from "../i18n/strings.js";
 
 export function Application(): VNode {
   const { i18n } = useTranslationContext();
@@ -89,7 +90,7 @@ export function Application(): VNode {
     redirectTo(Pages.balanceTransaction({ tid }));
   }
   return (
-    <TranslationProvider>
+    <TranslationProvider source={strings}>
       <DevContextProvider>
         <IoCProviderForRuntime>
           <Router history={hash_history}>

packages/taler-wallet-webextension/src/wallet/BackupPage.tsx

@@ -48,7 +48,7 @@ import {
 } from "../components/styled/index.js";
 import { alertFromError } from "../context/alert.js";
 import { useBackendContext } from "../context/backend.js";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
 import { Button } from "../mui/Button.js";
 import { Pages } from "../NavigationBar.js";

packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts

@@ -27,7 +27,7 @@ import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { useState } from "preact/hooks";
 import { alertFromError, useAlertContext } from "../../context/alert.js";
 import { useBackendContext } from "../../context/backend.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { RecursiveState } from "../../utils/index.js";
 import { Props, State } from "./index.js";

packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts

@@ -29,7 +29,7 @@ import {
 } from "@gnu-taler/taler-util";
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { expect } from "chai";
-import { tests } from "../../../../web-util/src/index.browser.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
 import { nullFunction } from "../../mui/handlers.js";
 import { createWalletApiMock } from "../../test-utils.js";
 

packages/taler-wallet-webextension/src/wallet/DepositPage/views.tsx

@@ -20,7 +20,7 @@ import { AmountField } from "../../components/AmountField.js";
 import { ErrorMessage } from "../../components/ErrorMessage.js";
 import { SelectList } from "../../components/SelectList.js";
 import { Input, SubTitle, WarningBox } from "../../components/styled/index.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Button } from "../../mui/Button.js";
 import { Grid } from "../../mui/Grid.js";
 import { State } from "./index.js";

packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts

@@ -19,7 +19,7 @@ import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { useState } from "preact/hooks";
 import { alertFromError, useAlertContext } from "../../context/alert.js";
 import { useBackendContext } from "../../context/backend.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { assertUnreachable, RecursiveState } from "../../utils/index.js";
 import { Contact, Props, State } from "./index.js";

packages/taler-wallet-webextension/src/wallet/DestinationSelection/test.ts

@@ -27,7 +27,7 @@ import {
 } from "@gnu-taler/taler-util";
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { expect } from "chai";
-import { tests } from "../../../../web-util/src/index.browser.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
 import { nullFunction } from "../../mui/handlers.js";
 import { createWalletApiMock } from "../../test-utils.js";
 import { useComponentState } from "./state.js";

packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx

@@ -25,7 +25,7 @@ import {
   LinkPrimary,
   SvgIcon,
 } from "../../components/styled/index.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Button } from "../../mui/Button.js";
 import { Grid } from "../../mui/Grid.js";
 import { Paper } from "../../mui/Paper.js";

packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx

@@ -34,7 +34,7 @@ import { SelectList } from "../components/SelectList.js";
 import { NotifyUpdateFadeOut } from "../components/styled/index.js";
 import { Time } from "../components/Time.js";
 import { useBackendContext } from "../context/backend.js";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
 import { useDiagnostics } from "../hooks/useDiagnostics.js";
 import { Button } from "../mui/Button.js";

packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/views.tsx

@@ -15,7 +15,7 @@
  */
 
 import { h, VNode } from "preact";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { State } from "./index.js";
 
 export function ReadyView({ error }: State.Ready): VNode {

packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx

@@ -17,7 +17,7 @@ import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { Title } from "../components/styled/index.js";
 import { TermsOfService } from "../components/TermsOfService/index.js";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Button } from "../mui/Button.js";
 
 export interface Props {

packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts

@@ -22,7 +22,7 @@ import {
 import { useState } from "preact/hooks";
 import { alertFromError, useAlertContext } from "../../context/alert.js";
 import { useBackendContext } from "../../context/backend.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { Props, State } from "./index.js";
 

packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx

@@ -25,7 +25,7 @@ import { SelectList } from "../../components/SelectList.js";
 import { Input, SvgIcon } from "../../components/styled/index.js";
 import { TermsOfService } from "../../components/TermsOfService/index.js";
 import { Time } from "../../components/Time.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { State as SelectExchangeState } from "../../hooks/useSelectedExchange.js";
 import { Button } from "../../mui/Button.js";
 import arrowDown from "../../svg/chevron-down.svg";

packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx

@@ -27,7 +27,7 @@ import {
   Title,
   WarningBox,
 } from "../components/styled/index.js";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Button } from "../mui/Button.js";
 
 export interface Props {

packages/taler-wallet-webextension/src/wallet/History.tsx

@@ -35,7 +35,7 @@ import { Time } from "../components/Time.js";
 import { TransactionItem } from "../components/TransactionItem.js";
 import { alertFromError, useAlertContext } from "../context/alert.js";
 import { useBackendContext } from "../context/backend.js";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
 import { Button } from "../mui/Button.js";
 import { NoBalanceHelp } from "../popup/NoBalanceHelp.js";

packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts

@@ -24,7 +24,7 @@ import { useState } from "preact/hooks";
 import { alertFromError, useAlertContext } from "../../context/alert.js";
 import { useBackendContext } from "../../context/backend.js";
 import { useDevContext } from "../../context/devContext.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { AccountByType, Props, State } from "./index.js";
 

packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx

@@ -29,7 +29,7 @@ import { useState } from "preact/hooks";
 import { ErrorMessage } from "../../components/ErrorMessage.js";
 import { SelectList } from "../../components/SelectList.js";
 import { Input, SubTitle, SvgIcon } from "../../components/styled/index.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Button } from "../../mui/Button.js";
 import { TextFieldHandler } from "../../mui/handlers.js";
 import { TextField } from "../../mui/TextField.js";

packages/taler-wallet-webextension/src/wallet/Notifications/state.ts

@@ -17,7 +17,7 @@
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { alertFromError } from "../../context/alert.js";
 import { useBackendContext } from "../../context/backend.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { Props, State } from "./index.js";
 

packages/taler-wallet-webextension/src/wallet/Notifications/views.tsx

@@ -28,7 +28,7 @@ import {
   SmallLightText,
 } from "../../components/styled/index.js";
 import { Time } from "../../components/Time.js";
-import { useTranslationContext } from "../../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Avatar } from "../../mui/Avatar.js";
 import { Button } from "../../mui/Button.js";
 import { Grid } from "../../mui/Grid.js";

packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx

@@ -32,7 +32,7 @@ import {
   Title,
 } from "../components/styled/index.js";
 import { useBackendContext } from "../context/backend.js";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Button } from "../mui/Button.js";
 import { queryToSlashConfig } from "../utils/index.js";
 

packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx

@@ -30,7 +30,7 @@ import { PaymentStatus, SmallLightText } from "../components/styled/index.js";
 import { Time } from "../components/Time.js";
 import { alertFromError } from "../context/alert.js";
 import { useBackendContext } from "../context/backend.js";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
 import { Button } from "../mui/Button.js";
 

packages/taler-wallet-webextension/src/wallet/QrReader.tsx

@@ -23,7 +23,7 @@ import { styled } from "@linaria/react";
 import { css } from "@linaria/core";
 import { Fragment, h, VNode } from "preact";
 import { Ref, useEffect, useMemo, useRef, useState } from "preact/hooks";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Alert } from "../mui/Alert.js";
 import { Button } from "../mui/Button.js";
 import { TextField } from "../mui/TextField.js";

packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx

@@ -21,7 +21,7 @@ import { CopyButton } from "../components/CopyButton.js";
 import { ErrorMessage } from "../components/ErrorMessage.js";
 import { QR } from "../components/QR.js";
 import { Title, WarningBox } from "../components/styled/index.js";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { Button } from "../mui/Button.js";
 export interface Props {
   reservePub: string;

packages/taler-wallet-webextension/src/wallet/Settings.tsx

@@ -36,9 +36,9 @@ import {
 import { useAlertContext } from "../context/alert.js";
 import { useBackendContext } from "../context/backend.js";
 import { useDevContext } from "../context/devContext.js";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
-import { useAutoOpenPermissions } from "../hooks/useAutoOpenPermissions.js";
+import { useSettings } from "../hooks/useSettings.js";
 import { useBackupDeviceName } from "../hooks/useBackupDeviceName.js";
 import { useClipboardPermissions } from "../hooks/useClipboardPermissions.js";
 import { ToggleHandler } from "../mui/handlers.js";
@@ -48,9 +48,10 @@ import { platform } from "../platform/foreground.js";
 const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined;
 
 export function SettingsPage(): VNode {
-  const autoOpenToggle = useAutoOpenPermissions();
+  const [settings, updateSettings] = useSettings();
   const clipboardToggle = useClipboardPermissions();
   const { devMode, toggle } = useDevContext();
+  const { safely } = useAlertContext();
   const { name, update } = useBackupDeviceName();
   const { pushAlertOnError } = useAlertContext();
   const webex = platform.getWalletWebExVersion();
@@ -71,7 +72,15 @@ export function SettingsPage(): VNode {
       knownExchanges={exchanges}
       deviceName={name}
       setDeviceName={update}
-      autoOpenToggle={autoOpenToggle}
+      autoOpenToggle={{
+        value: settings.injectTalerSupport,
+        button: {
+          onClick: safely("update support injection", async () => {
+            console.log("click", settings.injectTalerSupport);
+            updateSettings("injectTalerSupport", !settings.injectTalerSupport);
+          }),
+        },
+      }}
       clipboardToggle={clipboardToggle}
       devModeToggle={{
         value: devMode,
@@ -115,21 +124,6 @@ export function SettingsView({
   return (
     <Fragment>
       <section>
-        {/* <Checkbox
-          label={
-            i18n.str`Automatically check clipboard for Taler URI`
-          }
-          name="clipboard"
-          description={
-            <i18n.Translate>
-              Enabling this option below will make using the wallet faster, but
-              requires more permissions from your browser.
-            </i18n.Translate>
-          }
-          enabled={clipboardToggle.value!}
-          onToggle={clipboardToggle.button.onClick!}
-        /> */}
-
         <SubTitle>
           <i18n.Translate>Trust</i18n.Translate>
         </SubTitle>
@@ -273,23 +267,22 @@ export function SettingsView({
           enabled={devModeToggle.value!}
           onToggle={devModeToggle.button.onClick!}
         />
-        <JustInDevMode>
+        <SubTitle>
-          <SubTitle>
+          <i18n.Translate>Navigator</i18n.Translate>
-            <i18n.Translate>Navigator</i18n.Translate>
+        </SubTitle>
-          </SubTitle>
+        <Checkbox
-          <Checkbox
+          label={i18n.str`Automatically inject Taler API in all pages`}
-            label={i18n.str`Automatically open wallet based on page content`}
+          name="inject"
-            name="autoOpen"
+          description={
-            description={
+            <i18n.Translate>
-              <i18n.Translate>
+              Disabling this option will make some web application not able to
-                Enabling this option below will make using the wallet faster,
+              trigger the wallet when clicking links but you will be able to
-                but requires more permissions from your browser.
+              open the wallet using the keyboard shortcut
-              </i18n.Translate>
+            </i18n.Translate>
-            }
+          }
-            enabled={autoOpenToggle.value!}
+          enabled={autoOpenToggle.value!}
-            onToggle={autoOpenToggle.button.onClick!}
+          onToggle={autoOpenToggle.button.onClick!}
-          />
+        />
-        </JustInDevMode>
       </section>
     </Fragment>
   );

packages/taler-wallet-webextension/src/wallet/Transaction.tsx

@@ -61,7 +61,7 @@ import {
 import { Time } from "../components/Time.js";
 import { alertFromError, useAlertContext } from "../context/alert.js";
 import { useBackendContext } from "../context/backend.js";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
 import { Button } from "../mui/Button.js";
 import { SafeHandler } from "../mui/handlers.js";
@@ -283,10 +283,7 @@ function TransactionTemplate({
                 <Button
                   variant="contained"
                   color="error"
-                  onClick={safely(
+                  onClick={safely("delete transaction", onDelete)}
-                    onDelete,
-                    i18n.str`Could not forget transaction`,
-                  )}
                 >
                   <i18n.Translate>Confirm</i18n.Translate>
                 </Button>
@@ -322,10 +319,7 @@ function TransactionTemplate({
                 <Button
                   variant="contained"
                   color="error"
-                  onClick={safely(
+                  onClick={safely("cancel active transaction", onCancel)}
-                    onCancel,
-                    i18n.str`Could not cancel the active transaction`,
-                  )}
                 >
                   <i18n.Translate>Yes</i18n.Translate>
                 </Button>
@@ -340,7 +334,7 @@ function TransactionTemplate({
           {showSend ? (
             <Button
               variant="contained"
-              onClick={safely(onSend, i18n.str`Could not send`)}
+              onClick={safely("send transaction", onSend)}
             >
               <i18n.Translate>Send</i18n.Translate>
             </Button>
@@ -350,7 +344,7 @@ function TransactionTemplate({
           {showRetry ? (
             <Button
               variant="contained"
-              onClick={safely(onRetry, i18n.str`Could not retry`)}
+              onClick={safely("retry transaction", onRetry)}
             >
               <i18n.Translate>Retry</i18n.Translate>
             </Button>
@@ -627,9 +621,8 @@ export function TransactionView({
                 <div>
                   <Button
                     variant="contained"
-                    onClick={safely(
+                    onClick={safely("refund transaction", () =>
-                      () => onRefund(transaction.proposalId),
+                      onRefund(transaction.proposalId),
-                      i18n.str`Could not refund`,
                     )}
                   >
                     <i18n.Translate>Accept</i18n.Translate>

packages/taler-wallet-webextension/src/wallet/Welcome.tsx

@@ -24,18 +24,27 @@ import { WalletDiagnostics } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { Checkbox } from "../components/Checkbox.js";
 import { SubTitle, Title } from "../components/styled/index.js";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser";
 import { useDiagnostics } from "../hooks/useDiagnostics.js";
-import { useAutoOpenPermissions } from "../hooks/useAutoOpenPermissions.js";
+import { useSettings } from "../hooks/useSettings.js";
 import { ToggleHandler } from "../mui/handlers.js";
 import { platform } from "../platform/foreground.js";
+import { useAlertContext } from "../context/alert.js";
 
 export function WelcomePage(): VNode {
-  const permissionToggle = useAutoOpenPermissions();
+  const [settings, updateSettings] = useSettings();
+  const { safely } = useAlertContext();
   const [diagnostics, timedOut] = useDiagnostics();
   return (
     <View
-      permissionToggle={permissionToggle}
+      permissionToggle={{
+        value: settings.injectTalerSupport,
+        button: {
+          onClick: safely("update support injection", async () =>
+            updateSettings("injectTalerSupport", !settings.injectTalerSupport),
+          ),
+        },
+      }}
       diagnostics={diagnostics}
       timedOut={timedOut}
     />
@@ -88,15 +97,16 @@ export function View({
           </Fragment>
         )}
         <SubTitle>
-          <i18n.Translate>Permissions</i18n.Translate>
+          <i18n.Translate>Navigator</i18n.Translate>
         </SubTitle>
         <Checkbox
-          label={i18n.str`Automatically open wallet based on page content`}
+          label={i18n.str`Automatically inject Taler API in all pages`}
-          name="perm"
+          name="inject"
           description={
             <i18n.Translate>
-              (Enabling this option below will make using the wallet faster, but
+              Disabling this option will make some web application not able to
-              requires more permissions from your browser.)
+              trigger the wallet when clicking links but you will be able to
+              open the wallet using the keyboard shortcut
             </i18n.Translate>
           }
           enabled={permissionToggle.value!}

packages/taler-wallet-webextension/tsconfig.json

@@ -31,9 +31,6 @@
     {
       "path": "../taler-wallet-core/"
     },
-    {
-      "path": "../web-util/"
-    },
     {
       "path": "../taler-util/"
     }