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

29 files changed, 83 insertions, 86 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/test.ts b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/test.ts
index a939c9268..8738e7cb4 100644
--- a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/test.ts
+++ b/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";
diff --git a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/views.tsx b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/views.tsx
index c3afc0d33..ae105656b 100644
--- a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/views.tsx
+++ b/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";
diff --git a/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx b/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx
index 666334214..68a90f8b5 100644
--- a/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx
+++ b/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 {
diff --git a/packages/taler-wallet-webextension/src/wallet/Application.tsx b/packages/taler-wallet-webextension/src/wallet/Application.tsx
index d960794e0..ff8cf0314 100644
--- a/packages/taler-wallet-webextension/src/wallet/Application.tsx
+++ b/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}>
diff --git a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
index ea1adbc73..52b9f7a10 100644
--- a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
+++ b/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";
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts
index 42a3ba847..fce214d73 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts
+++ b/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";
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts
index a06b1ae75..03ca01201 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts
+++ b/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";
 
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/views.tsx b/packages/taler-wallet-webextension/src/wallet/DepositPage/views.tsx
index 0d827db43..1a1a0c847 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage/views.tsx
+++ b/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";
diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts
index a921d32cb..2d843a17e 100644
--- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts
+++ b/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";
diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/test.ts b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/test.ts
index c6a57270b..c3ca3cc83 100644
--- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/test.ts
+++ b/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";
diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx
index 0649fd12f..7f239f33d 100644
--- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx
+++ b/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";
diff --git a/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx b/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx
index 339e69213..1b9767c68 100644
--- a/packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx
+++ b/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";
diff --git a/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/views.tsx b/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/views.tsx
index dc8a42b84..b4efcdce5 100644
--- a/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/views.tsx
+++ b/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 {
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx
index 2118c8984..ccea259e8 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx
+++ b/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 {
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts
index ff3800ee8..22faddb93 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts
+++ b/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";
 
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx
index 242a8e823..98ded067b 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx
+++ b/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";
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
index 404fc8bee..0b6016761 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
+++ b/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 {
diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx
index e0e2d3af9..71f5c2e19 100644
--- a/packages/taler-wallet-webextension/src/wallet/History.tsx
+++ b/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";
diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts b/packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts
index d7c7d2b48..1f8ab4883 100644
--- a/packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts
+++ b/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";
 
diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx b/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx
index fb32e5a59..c3e11e30d 100644
--- a/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx
+++ b/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";
diff --git a/packages/taler-wallet-webextension/src/wallet/Notifications/state.ts b/packages/taler-wallet-webextension/src/wallet/Notifications/state.ts
index 0e06a1e75..dbfadad26 100644
--- a/packages/taler-wallet-webextension/src/wallet/Notifications/state.ts
+++ b/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";
 
diff --git a/packages/taler-wallet-webextension/src/wallet/Notifications/views.tsx b/packages/taler-wallet-webextension/src/wallet/Notifications/views.tsx
index 8d0bb34c0..ea0b1c623 100644
--- a/packages/taler-wallet-webextension/src/wallet/Notifications/views.tsx
+++ b/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";
diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
index 286a2a88d..3ac7254d5 100644
--- a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
+++ b/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";
 
diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx
index 789465a87..94bcfe2fb 100644
--- a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx
+++ b/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";
 
diff --git a/packages/taler-wallet-webextension/src/wallet/QrReader.tsx b/packages/taler-wallet-webextension/src/wallet/QrReader.tsx
index 6a31da959..99c42edec 100644
--- a/packages/taler-wallet-webextension/src/wallet/QrReader.tsx
+++ b/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";
diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
index c366f014f..2b05b0a36 100644
--- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
+++ b/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;
diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.tsx
index 3109e8947..eea1ffb49 100644
--- a/packages/taler-wallet-webextension/src/wallet/Settings.tsx
+++ b/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>
-            <i18n.Translate>Navigator</i18n.Translate>
-          </SubTitle>
-          <Checkbox
-            label={i18n.str`Automatically open wallet based on page content`}
-            name="autoOpen"
-            description={
-              <i18n.Translate>
-                Enabling this option below will make using the wallet faster,
-                but requires more permissions from your browser.
-              </i18n.Translate>
-            }
-            enabled={autoOpenToggle.value!}
-            onToggle={autoOpenToggle.button.onClick!}
-          />
-        </JustInDevMode>
+        <SubTitle>
+          <i18n.Translate>Navigator</i18n.Translate>
+        </SubTitle>
+        <Checkbox
+          label={i18n.str`Automatically inject Taler API in all pages`}
+          name="inject"
+          description={
+            <i18n.Translate>
+              Disabling this option will make some web application not able to
+              trigger the wallet when clicking links but you will be able to
+              open the wallet using the keyboard shortcut
+            </i18n.Translate>
+          }
+          enabled={autoOpenToggle.value!}
+          onToggle={autoOpenToggle.button.onClick!}
+        />
       </section>
     </Fragment>
   );
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index d34e57f58..1ef0f0b79 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/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(
-                    onDelete,
-                    i18n.str`Could not forget transaction`,
-                  )}
+                  onClick={safely("delete transaction", onDelete)}
                 >
                   <i18n.Translate>Confirm</i18n.Translate>
                 </Button>
@@ -322,10 +319,7 @@ function TransactionTemplate({
                 <Button
                   variant="contained"
                   color="error"
-                  onClick={safely(
-                    onCancel,
-                    i18n.str`Could not cancel the active transaction`,
-                  )}
+                  onClick={safely("cancel active transaction", onCancel)}
                 >
                   <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(
-                      () => onRefund(transaction.proposalId),
-                      i18n.str`Could not refund`,
+                    onClick={safely("refund transaction", () =>
+                      onRefund(transaction.proposalId),
                     )}
                   >
                     <i18n.Translate>Accept</i18n.Translate>
diff --git a/packages/taler-wallet-webextension/src/wallet/Welcome.tsx b/packages/taler-wallet-webextension/src/wallet/Welcome.tsx
index b243eaa1c..1893c4161 100644
--- a/packages/taler-wallet-webextension/src/wallet/Welcome.tsx
+++ b/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`}
-          name="perm"
+          label={i18n.str`Automatically inject Taler API in all pages`}
+          name="inject"
           description={
             <i18n.Translate>
-              (Enabling this option below will make using the wallet faster, but
-              requires more permissions from your browser.)
+              Disabling this option will make some web application not able to
+              trigger the wallet when clicking links but you will be able to
+              open the wallet using the keyboard shortcut
             </i18n.Translate>
           }
           enabled={permissionToggle.value!}