take translator from transaltion context

37 files changed, 175 insertions, 213 deletions

diff --git a/packages/taler-wallet-webextension/src/NavigationBar.tsx b/packages/taler-wallet-webextension/src/NavigationBar.tsx
index bebe9436e..8d5c1fa4d 100644
--- a/packages/taler-wallet-webextension/src/NavigationBar.tsx
+++ b/packages/taler-wallet-webextension/src/NavigationBar.tsx
@@ -27,7 +27,7 @@
 import { VNode, h } from "preact";
 import { JustInDevMode } from "./components/JustInDevMode";
 import { NavigationHeader, NavigationHeaderHolder } from "./components/styled";
-import { useTranslationContext } from "./context/translation.js";
+import { useTranslationContext } from "./context/translation";
 
 /**
  * List of pages used by the wallet
diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
index 48360f7c7..f55f5c846 100644
--- a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
+++ b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
@@ -17,7 +17,7 @@
 import { PaytoUri } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
-import { useTranslationContext } from "../context/translation.js";
+import { useTranslationContext } from "../context/translation";
 import { CopiedIcon, CopyIcon } from "../svg";
 import { ButtonBox, TooltipRight } from "./styled";
 
diff --git a/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx b/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx
index b5ad7cda7..dc42b9ef7 100644
--- a/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx
+++ b/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx
@@ -14,8 +14,8 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { i18n } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
+import { useTranslationContext } from "../context/translation";
 
 export function DebugCheckbox({
   enabled,
@@ -24,6 +24,8 @@ export function DebugCheckbox({
   enabled: boolean;
   onToggle: () => void;
 }): VNode {
+  const { i18n } = useTranslationContext();
+
   return (
     <div>
       <input
diff --git a/packages/taler-wallet-webextension/src/components/Diagnostics.tsx b/packages/taler-wallet-webextension/src/components/Diagnostics.tsx
index b136ebc24..0998cab7b 100644
--- a/packages/taler-wallet-webextension/src/components/Diagnostics.tsx
+++ b/packages/taler-wallet-webextension/src/components/Diagnostics.tsx
@@ -14,8 +14,9 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { i18n, WalletDiagnostics } from "@gnu-taler/taler-util";
+import { WalletDiagnostics } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
+import { useTranslationContext } from "../context/translation";
 import { PageLink } from "../renderHtml";
 
 interface Props {
@@ -24,6 +25,7 @@ interface Props {
 }
 
 export function Diagnostics({ timedOut, diagnostics }: Props): VNode {
+  const { i18n } = useTranslationContext();
   if (timedOut) {
     return (
       <p>
diff --git a/packages/taler-wallet-webextension/src/components/EditableText.tsx b/packages/taler-wallet-webextension/src/components/EditableText.tsx
index 8d45cae90..8f342ef28 100644
--- a/packages/taler-wallet-webextension/src/components/EditableText.tsx
+++ b/packages/taler-wallet-webextension/src/components/EditableText.tsx
@@ -14,9 +14,9 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { i18n } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { useRef, useState } from "preact/hooks";
+import { useTranslationContext } from "../context/translation";
 
 interface Props {
   value: string;
@@ -32,6 +32,7 @@ export function EditableText({
   label,
   description,
 }: Props): VNode {
+  const { i18n } = useTranslationContext();
   const [editing, setEditing] = useState(false);
   const ref = useRef<HTMLInputElement>(null);
   let InputText;
diff --git a/packages/taler-wallet-webextension/src/components/Loading.tsx b/packages/taler-wallet-webextension/src/components/Loading.tsx
index 7504034a0..d28953a10 100644
--- a/packages/taler-wallet-webextension/src/components/Loading.tsx
+++ b/packages/taler-wallet-webextension/src/components/Loading.tsx
@@ -13,13 +13,30 @@
  You should have received a copy of the GNU General Public License along with
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
-import { i18n } from "@gnu-taler/taler-util";
-import { h, VNode } from "preact";
+import { Fragment, h, VNode } from "preact";
+import { useEffect, useState } from "preact/hooks";
+import { useTranslationContext } from "../context/translation";
+import { CenteredText } from "./styled";
 
 export function Loading(): VNode {
-  return (
-    <div>
-      <i18n.Translate>Loading</i18n.Translate>...
-    </div>
-  );
+  const { i18n } = useTranslationContext();
+  const [tooLong, setTooLong] = useState(false);
+  useEffect(() => {
+    const id = setTimeout(() => {
+      setTooLong(true);
+    }, 500);
+    return () => {
+      clearTimeout(id);
+    };
+  });
+  if (tooLong) {
+    return (
+      <section style={{ margin: "auto" }}>
+        <CenteredText>
+          <i18n.Translate>Loading</i18n.Translate>...
+        </CenteredText>
+      </section>
+    );
+  }
+  return <Fragment />;
 }
diff --git a/packages/taler-wallet-webextension/src/components/SelectList.tsx b/packages/taler-wallet-webextension/src/components/SelectList.tsx
index 676fd672f..122b473b1 100644
--- a/packages/taler-wallet-webextension/src/components/SelectList.tsx
+++ b/packages/taler-wallet-webextension/src/components/SelectList.tsx
@@ -14,8 +14,8 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { i18n } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
+import { useTranslationContext } from "../context/translation";
 import { NiceSelect } from "./styled";
 
 interface Props {
@@ -39,6 +39,7 @@ export function SelectList({
   description,
   canBeNull,
 }: Props): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <Fragment>
       <label
diff --git a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
index b17dfce88..42afe5eaf 100644
--- a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
+++ b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
@@ -21,23 +21,18 @@ import {
   Timestamp,
   Transaction,
   TransactionType,
-  i18n,
 } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
-import imageBank from "../../static/img/ri-bank-line.svg";
-import imageHandHeart from "../../static/img/ri-hand-heart-line.svg";
-import imageRefresh from "../../static/img/ri-refresh-line.svg";
-import imageRefund from "../../static/img/ri-refund-2-line.svg";
-import imageShoppingCart from "../../static/img/ri-shopping-cart-line.svg";
+import { useTranslationContext } from "../context/translation";
 import { Avatar } from "../mui/Avatar";
 import { Pages } from "../NavigationBar";
 import {
   Column,
   ExtraLargeText,
   HistoryRow,
-  SmallLightText,
   LargeText,
   LightText,
+  SmallLightText,
 } from "./styled";
 import { Time } from "./Time";
 
@@ -121,6 +116,7 @@ export function TransactionItem(props: { tx: Transaction }): VNode {
 }
 
 function TransactionLayout(props: TransactionLayoutProps): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <HistoryRow
       href={Pages.balance_transaction.replace(":tid", props.id)}
@@ -183,6 +179,7 @@ interface TransactionAmountProps {
 }
 
 function TransactionAmount(props: TransactionAmountProps): VNode {
+  const { i18n } = useTranslationContext();
   let sign: string;
   switch (props.debitCreditIndicator) {
     case "credit":
diff --git a/packages/taler-wallet-webextension/src/context/translation.ts b/packages/taler-wallet-webextension/src/context/translation.ts
index 2ded07078..82ea41e32 100644
--- a/packages/taler-wallet-webextension/src/context/translation.ts
+++ b/packages/taler-wallet-webextension/src/context/translation.ts
@@ -31,7 +31,8 @@ interface Type {
   lang: string;
   supportedLang: { [id in keyof typeof supportedLang]: string }
   changeLanguage: (l: string) => void;
-  i18n: typeof i18n
+  i18n: typeof i18n;
+  isSaved: boolean;
 }
 
 const supportedLang = {
@@ -44,7 +45,8 @@ const supportedLang = {
   it: "Italiano [it]",
   // ko: "한국어 [ko]",
   // ru: "Ру́сский язы́к [ru]",
-  tr: "Türk [tr]"
+  tr: "Türk [tr]",
+  navigator: "Defined by navigator",
 };
 
 
@@ -54,7 +56,8 @@ const initial = {
   changeLanguage: () => {
     // do not change anything
   },
-  i18n
+  i18n,
+  isSaved: false,
 };
 const Context = createContext<Type>(initial);
 
@@ -69,7 +72,7 @@ export const TranslationProvider = ({
   children,
   forceLang,
 }: Props): VNode => {
-  const [lang, changeLanguage] = useLang(initial);
+  const [lang, changeLanguage, isSaved] = useLang(initial);
   useEffect(() => {
     if (forceLang) {
       changeLanguage(forceLang);
@@ -83,7 +86,7 @@ export const TranslationProvider = ({
   } else {
     setupI18n(lang, strings);
   }
-  return h(Context.Provider, { value: { lang, changeLanguage, supportedLang, i18n }, children });
+  return h(Context.Provider, { value: { lang, changeLanguage, supportedLang, i18n, isSaved }, children });
 };
 
 export const useTranslationContext = (): Type => useContext(Context);
diff --git a/packages/taler-wallet-webextension/src/cta/Deposit.tsx b/packages/taler-wallet-webextension/src/cta/Deposit.tsx
index 82d898d77..ac6c1fd6d 100644
--- a/packages/taler-wallet-webextension/src/cta/Deposit.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Deposit.tsx
@@ -22,7 +22,6 @@
 /**
  * Imports.
  */
-// import * as i18n from "../i18n";
 
 import {
   AmountJson,
@@ -31,7 +30,6 @@ import {
   ConfirmPayResult,
   ConfirmPayResultType,
   ContractTerms,
-  i18n,
   NotificationType,
   PreparePayResult,
   PreparePayResultType,
@@ -49,6 +47,7 @@ import {
   WalletAction,
   WarningBox,
 } from "../components/styled";
+import { useTranslationContext } from "../context/translation";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
 import * as wxApi from "../wxApi";
 
@@ -58,6 +57,7 @@ interface Props {
 }
 
 export function DepositPage({ talerPayUri, goBack }: Props): VNode {
+  const { i18n } = useTranslationContext();
   const [payStatus, setPayStatus] = useState<PreparePayResult | undefined>(
     undefined,
   );
@@ -199,6 +199,7 @@ export function PaymentRequestView({
 }: PaymentRequestViewProps): VNode {
   let totalFees: AmountJson = Amounts.getZero(payStatus.amountRaw);
   const contractTerms: ContractTerms = payStatus.contractTerms;
+  const { i18n } = useTranslationContext();
 
   return (
     <WalletAction>
diff --git a/packages/taler-wallet-webextension/src/cta/Pay.tsx b/packages/taler-wallet-webextension/src/cta/Pay.tsx
index 4fe44dcff..ba31f4c34 100644
--- a/packages/taler-wallet-webextension/src/cta/Pay.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Pay.tsx
@@ -22,7 +22,6 @@
 /**
  * Imports.
  */
-// import * as i18n from "../i18n";
 
 import {
   AmountJson,
@@ -32,12 +31,10 @@ import {
   ConfirmPayResultDone,
   ConfirmPayResultType,
   ContractTerms,
-  i18n,
   NotificationType,
   PreparePayResult,
   PreparePayResultType,
   Product,
-  Translate,
 } from "@gnu-taler/taler-util";
 import { OperationFailedError } from "@gnu-taler/taler-wallet-core";
 import { Fragment, h, VNode } from "preact";
@@ -50,13 +47,13 @@ import { Part } from "../components/Part";
 import { QR } from "../components/QR";
 import {
   ButtonSuccess,
-  LightText,
   LinkSuccess,
   SmallLightText,
   SuccessBox,
   WalletAction,
   WarningBox,
 } from "../components/styled";
+import { useTranslationContext } from "../context/translation";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
 import * as wxApi from "../wxApi";
 
@@ -89,6 +86,7 @@ export function PayPage({
   goToWalletManualWithdraw,
   goBack,
 }: Props): VNode {
+  const { i18n } = useTranslationContext();
   const [payResult, setPayResult] = useState<ConfirmPayResult | undefined>(
     undefined,
   );
@@ -166,6 +164,7 @@ export function PaymentRequestView({
   goToWalletManualWithdraw,
   balance,
 }: PaymentRequestViewProps): VNode {
+  const { i18n } = useTranslationContext();
   let totalFees: AmountJson = Amounts.getZero(payStatus.amountRaw);
   const contractTerms: ContractTerms = payStatus.contractTerms;
 
@@ -412,6 +411,7 @@ export function PaymentRequestView({
 }
 
 function ProductList({ products }: { products: Product[] }): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <Fragment>
       <SmallLightText style={{ margin: ".5em" }}>
diff --git a/packages/taler-wallet-webextension/src/cta/Refund.tsx b/packages/taler-wallet-webextension/src/cta/Refund.tsx
index 8ce008bcd..efc436bc8 100644
--- a/packages/taler-wallet-webextension/src/cta/Refund.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Refund.tsx
@@ -20,9 +20,10 @@
  * @author sebasjm
  */
 
-import { Amounts, ApplyRefundResponse, i18n } from "@gnu-taler/taler-util";
+import { Amounts, ApplyRefundResponse } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
+import { useTranslationContext } from "../context/translation";
 import { AmountView } from "../renderHtml";
 import * as wxApi from "../wxApi";
 
@@ -33,6 +34,7 @@ export interface ViewProps {
   applyResult: ApplyRefundResponse;
 }
 export function View({ applyResult }: ViewProps): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <section class="main">
       <h1>GNU Taler Wallet</h1>
@@ -71,6 +73,7 @@ export function RefundPage({ talerRefundUri }: Props): VNode {
   const [applyResult, setApplyResult] = useState<
     ApplyRefundResponse | undefined
   >(undefined);
+  const { i18n } = useTranslationContext();
   const [errMsg, setErrMsg] = useState<string | undefined>(undefined);
 
   useEffect(() => {
diff --git a/packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx b/packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx
index 1244b7915..cafc43c6f 100644
--- a/packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx
+++ b/packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx
@@ -1,4 +1,3 @@
-import { i18n, Translate } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { CheckboxOutlined } from "../components/CheckboxOutlined";
 import { ExchangeXmlTos } from "../components/ExchangeToS";
@@ -10,6 +9,7 @@ import {
   WarningBox,
   WarningText,
 } from "../components/styled";
+import { useTranslationContext } from "../context/translation";
 import { TermsState } from "../utils/index";
 
 interface Props {
@@ -26,6 +26,7 @@ export function TermsOfServiceSection({
   onAccept,
   onReview,
 }: Props): VNode {
+  const { i18n } = useTranslationContext();
   if (!reviewing) {
     if (!reviewed) {
       if (!onReview) {
diff --git a/packages/taler-wallet-webextension/src/cta/Tip.tsx b/packages/taler-wallet-webextension/src/cta/Tip.tsx
index ff86ce8c7..71aa04a2b 100644
--- a/packages/taler-wallet-webextension/src/cta/Tip.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Tip.tsx
@@ -20,10 +20,11 @@
  * @author sebasjm <dold@taler.net>
  */
 
-import { PrepareTipResult, i18n } from "@gnu-taler/taler-util";
+import { PrepareTipResult } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
 import { Loading } from "../components/Loading";
+import { useTranslationContext } from "../context/translation";
 import { AmountView } from "../renderHtml";
 import * as wxApi from "../wxApi";
 
@@ -40,6 +41,7 @@ export function View({
   onAccept,
   onIgnore,
 }: ViewProps): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <section class="main">
       <h1>GNU Taler Wallet</h1>
@@ -77,6 +79,7 @@ export function View({
 }
 
 export function TipPage({ talerTipUri }: Props): VNode {
+  const { i18n } = useTranslationContext();
   const [updateCounter, setUpdateCounter] = useState<number>(0);
   const [prepareTipResult, setPrepareTipResult] = useState<
     PrepareTipResult | undefined
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
index 7c9745ddc..8535c67eb 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
@@ -25,7 +25,6 @@ import {
   AmountJson,
   Amounts,
   ExchangeListItem,
-  i18n,
   Translate,
   WithdrawUriInfoResponse,
 } from "@gnu-taler/taler-util";
@@ -52,6 +51,7 @@ import {
 } from "../utils/index";
 import * as wxApi from "../wxApi";
 import { TermsOfServiceSection } from "./TermsOfServiceSection";
+import { useTranslationContext } from "../context/translation";
 
 interface Props {
   talerWithdrawUri?: string;
@@ -84,6 +84,7 @@ export function View({
   onAccept,
   reviewed,
 }: ViewProps): VNode {
+  const { i18n } = useTranslationContext();
   const [withdrawError, setWithdrawError] = useState<
     OperationFailedError | undefined
   >(undefined);
@@ -236,12 +237,10 @@ export function WithdrawPageWithParsedURI({
   uri: string;
   uriInfo: WithdrawUriInfoResponse;
 }): VNode {
+  const { i18n } = useTranslationContext();
   const [customExchange, setCustomExchange] = useState<string | undefined>(
     undefined,
   );
-  // const [errorAccepting, setErrorAccepting] = useState<string | undefined>(
-  //   undefined,
-  // );
 
   const [reviewing, setReviewing] = useState<boolean>(false);
   const [reviewed, setReviewed] = useState<boolean>(false);
@@ -332,6 +331,7 @@ export function WithdrawPageWithParsedURI({
   );
 }
 export function WithdrawPage({ talerWithdrawUri }: Props): VNode {
+  const { i18n } = useTranslationContext();
   const uriInfoHook = useAsyncAsHook(() =>
     !talerWithdrawUri
       ? Promise.reject(undefined)
diff --git a/packages/taler-wallet-webextension/src/cta/reset-required.tsx b/packages/taler-wallet-webextension/src/cta/reset-required.tsx
deleted file mode 100644
index 350c32d76..000000000
--- a/packages/taler-wallet-webextension/src/cta/reset-required.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-/*
- This file is part of TALER
- (C) 2017 GNUnet e.V.
-
- 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.
-
- 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
- TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
- */
-
-/**
- * Page to inform the user when a database reset is required.
- *
- * @author sebasjm
- */
-
-import { i18n } from "@gnu-taler/taler-util";
-import { Component, h, VNode } from "preact";
-import * as wxApi from "../wxApi";
-
-interface State {
-  /**
-   * Did the user check the confirmation check box?
-   */
-  checked: boolean;
-
-  /**
-   * Do we actually need to reset the db?
-   */
-  resetRequired: boolean;
-}
-
-class ResetNotification extends Component<any, State> {
-  constructor(props: any) {
-    super(props);
-    this.state = { checked: false, resetRequired: true };
-    setInterval(() => this.update(), 500);
-  }
-  async update(): Promise<void> {
-    const res = await wxApi.checkUpgrade();
-    this.setState({ resetRequired: res.dbResetRequired });
-  }
-  render(): VNode {
-    if (this.state.resetRequired) {
-      return (
-        <div>
-          <h1>
-            <i18n.Translate>Manual Reset Required</i18n.Translate>
-          </h1>
-          <p>
-            <i18n.Translate>
-              The wallet&apos;s database in your browser is incompatible with
-              the currently installed wallet. Please reset manually.
-            </i18n.Translate>
-          </p>
-          <p>
-            <i18n.Translate>
-              Once the database format has stabilized, we will provide automatic
-              upgrades.
-            </i18n.Translate>
-          </p>
-          <input
-            id="check"
-            type="checkbox"
-            checked={this.state.checked}
-            onChange={() => {
-              this.setState((prev) => ({ checked: prev.checked }));
-            }}
-          />{" "}
-          <label htmlFor="check">
-            <i18n.Translate>
-              I understand that I will lose all my data
-            </i18n.Translate>
-          </label>
-          <br />
-          <button
-            class="pure-button"
-            disabled={!this.state.checked}
-            onClick={() => wxApi.resetDb()}
-          >
-            <i18n.Translate>Reset</i18n.Translate>
-          </button>
-        </div>
-      );
-    }
-    return (
-      <div>
-        <h1>
-          <i18n.Translate>Everything is fine!</i18n.Translate>
-        </h1>
-        <p>
-          <i18n.Translate>
-            A reset is not required anymore, you can close this page.
-          </i18n.Translate>
-        </p>
-      </div>
-    );
-  }
-}
-
-/**
- * @deprecated to be removed
- */
-export function createResetRequiredPage(): VNode {
-  return <ResetNotification />;
-}
diff --git a/packages/taler-wallet-webextension/src/cta/return-coins.tsx b/packages/taler-wallet-webextension/src/cta/return-coins.tsx
index 1d688fa06..e7a784e2c 100644
--- a/packages/taler-wallet-webextension/src/cta/return-coins.tsx
+++ b/packages/taler-wallet-webextension/src/cta/return-coins.tsx
@@ -14,8 +14,8 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { i18n } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
+import { useTranslationContext } from "../context/translation";
 /**
  * Return coins to own bank account.
  *
@@ -26,6 +26,7 @@ import { h, VNode } from "preact";
  * Imports.
  */
 export function createReturnCoinsPage(): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <span>
       <i18n.Translate>Not implemented yet.</i18n.Translate>
diff --git a/packages/taler-wallet-webextension/src/hooks/useLang.ts b/packages/taler-wallet-webextension/src/hooks/useLang.ts
index 7215f2256..959297647 100644
--- a/packages/taler-wallet-webextension/src/hooks/useLang.ts
+++ b/packages/taler-wallet-webextension/src/hooks/useLang.ts
@@ -22,7 +22,7 @@ function getBrowserLang(): string | undefined {
   return undefined;
 }
 
-export function useLang(initial?: string): [string, (s: string) => void] {
+export function useLang(initial?: string): [string, (s: string) => void, boolean] {
   const defaultLang = (getBrowserLang() || initial || "en").substring(0, 2);
   return useNotNullLocalStorage("lang-preference", defaultLang);
 }
diff --git a/packages/taler-wallet-webextension/src/hooks/useLocalStorage.ts b/packages/taler-wallet-webextension/src/hooks/useLocalStorage.ts
index 3883aff04..4be82976f 100644
--- a/packages/taler-wallet-webextension/src/hooks/useLocalStorage.ts
+++ b/packages/taler-wallet-webextension/src/hooks/useLocalStorage.ts
@@ -56,7 +56,7 @@ export function useLocalStorage(
 export function useNotNullLocalStorage(
   key: string,
   initialValue: string,
-): [string, StateUpdater<string>] {
+): [string, StateUpdater<string>, boolean] {
   const [storedValue, setStoredValue] = useState<string>((): string => {
     return typeof window !== "undefined"
       ? window.localStorage.getItem(key) || initialValue
@@ -75,5 +75,6 @@ export function useNotNullLocalStorage(
     }
   };
 
-  return [storedValue, setValue];
+  const isSaved = window.localStorage.getItem(key) !== null;
+  return [storedValue, setValue, isSaved];
 }
diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
index 53b4e1518..c894c333f 100644
--- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx
@@ -17,7 +17,6 @@
 import {
   Amounts,
   Balance,
-  i18n,
   NotificationType,
   Transaction,
 } from "@gnu-taler/taler-util";
@@ -29,6 +28,7 @@ import { Loading } from "../components/Loading";
 import { LoadingError } from "../components/LoadingError";
 import { MultiActionButton } from "../components/MultiActionButton";
 import { ButtonBoxPrimary, ButtonPrimary } from "../components/styled";
+import { useTranslationContext } from "../context/translation";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
 import { AddNewActionView } from "../wallet/AddNewActionView";
 import * as wxApi from "../wxApi";
@@ -44,6 +44,7 @@ export function BalancePage({
   goToWalletDeposit,
   goToWalletHistory,
 }: Props): VNode {
+  const { i18n } = useTranslationContext();
   const [addingAction, setAddingAction] = useState(false);
   const state = useAsyncAsHook(wxApi.getBalance, [
     NotificationType.WithdrawGroupFinished,
@@ -92,6 +93,7 @@ export function BalanceView({
   goToWalletHistory,
   goToAddAction,
 }: BalanceViewProps): VNode {
+  const { i18n } = useTranslationContext();
   const currencyWithNonZeroAmount = balances
     .filter((b) => !Amounts.isZero(b.available))
     .map((b) => b.available.split(":")[0]);
diff --git a/packages/taler-wallet-webextension/src/popup/DeveloperPage.tsx b/packages/taler-wallet-webextension/src/popup/DeveloperPage.tsx
index 228c3cdfd..3144a9ce3 100644
--- a/packages/taler-wallet-webextension/src/popup/DeveloperPage.tsx
+++ b/packages/taler-wallet-webextension/src/popup/DeveloperPage.tsx
@@ -21,7 +21,6 @@ import {
   ExchangeListItem,
   NotificationType,
   Translate,
-  i18n,
 } from "@gnu-taler/taler-util";
 import { PendingTaskInfo } from "@gnu-taler/taler-wallet-core";
 import { format } from "date-fns";
@@ -30,6 +29,7 @@ import { useRef, useState } from "preact/hooks";
 import { Diagnostics } from "../components/Diagnostics";
 import { NotifyUpdateFadeOut } from "../components/styled";
 import { Time } from "../components/Time";
+import { useTranslationContext } from "../context/translation";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
 import { useDiagnostics } from "../hooks/useDiagnostics";
 import * as wxApi from "../wxApi";
@@ -110,6 +110,7 @@ export function View({
   coins,
   onDownloadDatabase,
 }: Props): VNode {
+  const { i18n } = useTranslationContext();
   const [downloadedDatabase, setDownloadedDatabase] = useState<
     { time: Date; content: string } | undefined
   >(undefined);
@@ -153,7 +154,13 @@ export function View({
       <p>
         <i18n.Translate>Debug tools</i18n.Translate>:
       </p>
-      <button onClick={confirmReset}>
+      <button
+        onClick={() =>
+          confirmReset(
+            i18n.str`Do you want to IRREVOCABLY DESTROY everything inside your wallet and LOSE ALL YOUR COINS?`,
+          )
+        }
+      >
         <i18n.Translate>reset</i18n.Translate>
       </button>
       <br />
@@ -262,6 +269,7 @@ function ShowAllCoins({
   coins: SplitedCoinInfo;
   currencies: { [ex: string]: string };
 }) {
+  const { i18n } = useTranslationContext();
   const [collapsedSpent, setCollapsedSpent] = useState(true);
   const [collapsedUnspent, setCollapsedUnspent] = useState(false);
   const total = coins.usable.reduce((prev, cur) => prev + cur.denom_value, 0);
@@ -372,12 +380,10 @@ export function reload(): void {
 
 function runIntegrationTest() {}
 
-export async function confirmReset(): Promise<void> {
-  if (
-    confirm(
-      i18n.str`Do you want to IRREVOCABLY DESTROY everything inside your wallet and LOSE ALL YOUR COINS?`,
-    )
-  ) {
+export async function confirmReset(
+  confirmTheResetMessage: string,
+): Promise<void> {
+  if (confirm(confirmTheResetMessage)) {
     await wxApi.resetDb();
     window.close();
   }
diff --git a/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx b/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx
index b8b21b24c..dfb99ac6a 100644
--- a/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx
+++ b/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx
@@ -1,12 +1,13 @@
-import { i18n } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { ButtonBoxWarning, WarningBox } from "../components/styled";
+import { useTranslationContext } from "../context/translation";
 
 export function NoBalanceHelp({
   goToWalletManualWithdraw,
 }: {
   goToWalletManualWithdraw: () => void;
 }): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <WarningBox>
       <p>
diff --git a/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx b/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx
index 40b76a289..9ac83a578 100644
--- a/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx
+++ b/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx
@@ -19,9 +19,10 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { classifyTalerUri, TalerUriType, i18n } from "@gnu-taler/taler-util";
+import { classifyTalerUri, TalerUriType } from "@gnu-taler/taler-util";
 import { Fragment, h } from "preact";
 import { ButtonPrimary, ButtonSuccess } from "../components/styled";
+import { useTranslationContext } from "../context/translation";
 import { actionForTalerUri } from "../utils/index";
 
 export interface Props {
@@ -49,6 +50,7 @@ async function navigateTo(url?: string) {
 
 export function TalerActionFound({ url, onDismiss }: Props) {
   const uriType = classifyTalerUri(url);
+  const { i18n } = useTranslationContext();
   return (
     <Fragment>
       <section>
diff --git a/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx b/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx
index 229fab7be..04ed5ec57 100644
--- a/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx
@@ -1,32 +1,18 @@
-import { classifyTalerUri, TalerUriType, i18n } from "@gnu-taler/taler-util";
+import { classifyTalerUri, TalerUriType } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { Button, ButtonSuccess, InputWithLabel } from "../components/styled";
+import { useTranslationContext } from "../context/translation";
 import { actionForTalerUri } from "../utils/index";
 
 export interface Props {
   onCancel: () => void;
 }
 
-function buttonLabelByTalerType(type: TalerUriType): VNode {
-  switch (type) {
-    case TalerUriType.TalerNotifyReserve:
-      return <i18n.Translate>Open reserve page</i18n.Translate>;
-    case TalerUriType.TalerPay:
-      return <i18n.Translate>Open pay page</i18n.Translate>;
-    case TalerUriType.TalerRefund:
-      return <i18n.Translate>Open refund page</i18n.Translate>;
-    case TalerUriType.TalerTip:
-      return <i18n.Translate>Open tip page</i18n.Translate>;
-    case TalerUriType.TalerWithdraw:
-      return <i18n.Translate>Open withdraw page</i18n.Translate>;
-  }
-  return <Fragment />;
-}
-
 export function AddNewActionView({ onCancel }: Props): VNode {
   const [url, setUrl] = useState("");
   const uriType = classifyTalerUri(url);
+  const { i18n } = useTranslationContext();
 
   return (
     <Fragment>
@@ -57,7 +43,21 @@ export function AddNewActionView({ onCancel }: Props): VNode {
               chrome.tabs.create({ url: actionForTalerUri(uriType, url) });
             }}
           >
-            {buttonLabelByTalerType(uriType)}
+            {(() => {
+              switch (uriType) {
+                case TalerUriType.TalerNotifyReserve:
+                  return <i18n.Translate>Open reserve page</i18n.Translate>;
+                case TalerUriType.TalerPay:
+                  return <i18n.Translate>Open pay page</i18n.Translate>;
+                case TalerUriType.TalerRefund:
+                  return <i18n.Translate>Open refund page</i18n.Translate>;
+                case TalerUriType.TalerTip:
+                  return <i18n.Translate>Open tip page</i18n.Translate>;
+                case TalerUriType.TalerWithdraw:
+                  return <i18n.Translate>Open withdraw page</i18n.Translate>;
+              }
+              return <Fragment />;
+            })()}
           </ButtonSuccess>
         )}
       </footer>
diff --git a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
index a5821d48b..39afe8441 100644
--- a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
@@ -14,7 +14,7 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
 */
 
-import { i18n, Timestamp, Translate } from "@gnu-taler/taler-util";
+import { Timestamp, Translate } from "@gnu-taler/taler-util";
 import {
   ProviderInfo,
   ProviderPaymentPaid,
@@ -40,6 +40,7 @@ import {
   SmallLightText,
   SmallText,
 } from "../components/styled";
+import { useTranslationContext } from "../context/translation";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
 import { Pages } from "../NavigationBar";
 import * as wxApi from "../wxApi";
@@ -65,6 +66,7 @@ interface Props {
 // }
 
 export function BackupPage({ onAddProvider }: Props): VNode {
+  const { i18n } = useTranslationContext();
   const status = useAsyncAsHook(wxApi.getBackupInfo);
   if (!status) {
     return <Loading />;
@@ -110,6 +112,7 @@ export function BackupView({
   onAddProvider,
   onSyncAll,
 }: ViewProps): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <Fragment>
       <section>
@@ -164,6 +167,7 @@ interface TransactionLayoutProps {
 }
 
 function BackupLayout(props: TransactionLayoutProps): VNode {
+  const { i18n } = useTranslationContext();
   const date = !props.timestamp ? undefined : new Date(props.timestamp.t_ms);
   const dateStr = date?.toLocaleString([], {
     dateStyle: "medium",
@@ -205,6 +209,7 @@ function BackupLayout(props: TransactionLayoutProps): VNode {
 }
 
 function ExpirationText({ until }: { until: Timestamp }): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <Fragment>
       <CenteredText>
diff --git a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
index 96644be28..0ee83c265 100644
--- a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
@@ -19,7 +19,7 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { AmountJson, Amounts, i18n, Translate } from "@gnu-taler/taler-util";
+import { AmountJson, Amounts } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { ErrorMessage } from "../components/ErrorMessage";
@@ -34,6 +34,7 @@ import {
   LightText,
   LinkPrimary,
 } from "../components/styled";
+import { useTranslationContext } from "../context/translation";
 
 export interface Props {
   error: string | undefined;
@@ -52,6 +53,7 @@ export function CreateManualWithdraw({
   onCreate,
   onAddExchange,
 }: Props): VNode {
+  const { i18n } = useTranslationContext();
   const exchangeSelectList = Object.keys(exchangeList);
   const currencySelectList = Object.values(exchangeList);
   const exchangeMap = exchangeSelectList.reduce(
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx
index d1d618e9f..a5b5997b3 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx
@@ -19,7 +19,6 @@ import {
   Amounts,
   AmountString,
   PaytoUri,
-  i18n,
 } from "@gnu-taler/taler-util";
 import { DepositFee } from "@gnu-taler/taler-wallet-core/src/operations/deposits";
 import { Fragment, h, VNode } from "preact";
@@ -34,6 +33,7 @@ import {
   InputWithLabel,
   WarningBox,
 } from "../components/styled";
+import { useTranslationContext } from "../context/translation";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
 import * as wxApi from "../wxApi";
 
@@ -103,6 +103,7 @@ export function View({
   onSend,
   onCalculateFee,
 }: ViewProps): VNode {
+  const { i18n } = useTranslationContext();
   const accountMap = createLabelsForBankAccount(knownBankAccounts);
   const [accountIdx, setAccountIdx] = useState(0);
   const [amount, setAmount] = useState<number | undefined>(undefined);
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx
index 1ffca827b..1b40fe78e 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx
@@ -1,7 +1,7 @@
-import { i18n, Translate } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { Button, ButtonSuccess, ButtonWarning } from "../components/styled";
+import { useTranslationContext } from "../context/translation";
 import { TermsOfServiceSection } from "../cta/TermsOfServiceSection";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
 import { buildTermsOfServiceState, TermsState } from "../utils/index";
@@ -77,6 +77,7 @@ export function View({
   onConfirm,
   onCancel,
 }: ViewProps): VNode {
+  const { i18n } = useTranslationContext();
   const needsReview =
     !terms || terms.status === "changed" || terms.status === "new";
   const [reviewed, setReviewed] = useState<boolean>(false);
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
index 7199ce90c..62d7e15b8 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
@@ -1,8 +1,6 @@
 import {
   canonicalizeBaseUrl,
-  i18n,
   TalerConfigResponse,
-  Translate,
 } from "@gnu-taler/taler-util";
 import { Fragment, h } from "preact";
 import { useEffect, useState } from "preact/hooks";
@@ -14,6 +12,7 @@ import {
   LightText,
   WarningBox,
 } from "../components/styled";
+import { useTranslationContext } from "../context/translation";
 
 export interface Props {
   initialValue?: string;
@@ -81,6 +80,7 @@ export function ExchangeSetUrlPage({
   onVerify,
   onConfirm,
 }: Props) {
+  const { i18n } = useTranslationContext();
   const { loading, result, endpoint, updateEndpoint, error } =
     useEndpointStatus(initialValue ?? "", onVerify);
 
diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx
index e0a1c588e..ea6057d05 100644
--- a/packages/taler-wallet-webextension/src/wallet/History.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/History.tsx
@@ -19,7 +19,6 @@ import {
   Balance,
   NotificationType,
   Transaction,
-  i18n,
 } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
@@ -37,6 +36,7 @@ import {
 } from "../components/styled";
 import { Time } from "../components/Time";
 import { TransactionItem } from "../components/TransactionItem";
+import { useTranslationContext } from "../context/translation";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
 import { NoBalanceHelp } from "../popup/NoBalanceHelp";
 import * as wxApi from "../wxApi";
@@ -51,6 +51,7 @@ export function HistoryPage({
   goToWalletManualWithdraw,
   goToWalletDeposit,
 }: Props): VNode {
+  const { i18n } = useTranslationContext();
   const balance = useAsyncAsHook(wxApi.getBalance);
   const balanceWithoutError = balance?.hasError
     ? []
@@ -106,6 +107,7 @@ export function HistoryView({
   transactions: Transaction[];
   balances: Balance[];
 }): VNode {
+  const { i18n } = useTranslationContext();
   const currencies = balances.map((b) => b.available.split(":")[0]);
 
   const defaultCurrencyIndex = currencies.findIndex(
diff --git a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
index d9a1544a7..6d9b9d2b5 100644
--- a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
@@ -19,12 +19,12 @@ import {
   AmountJson,
   Amounts,
   NotificationType,
-  i18n,
 } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { Loading } from "../components/Loading";
 import { LoadingError } from "../components/LoadingError";
+import { useTranslationContext } from "../context/translation";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
 import { Pages } from "../NavigationBar";
 import * as wxApi from "../wxApi";
@@ -51,6 +51,7 @@ export function ManualWithdrawPage({ currency, onCancel }: Props): VNode {
   const state = useAsyncAsHook(wxApi.listExchanges, [
     NotificationType.ExchangeAdded,
   ]);
+  const { i18n } = useTranslationContext();
 
   async function doCreate(
     exchangeBaseUrl: string,
diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
index 6bb5b6836..051aff0b6 100644
--- a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
@@ -18,7 +18,6 @@ import {
   Amounts,
   BackupBackupProviderTerms,
   canonicalizeBaseUrl,
-  i18n,
   Translate,
 } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
@@ -32,6 +31,7 @@ import {
   LightText,
   SmallLightText,
 } from "../components/styled";
+import { useTranslationContext } from "../context/translation";
 import { queryToSlashConfig } from "../utils/index";
 import * as wxApi from "../wxApi";
 
@@ -90,6 +90,7 @@ export function SetUrlView({
   onConfirm,
   withError,
 }: SetUrlViewProps) {
+  const { i18n } = useTranslationContext();
   const [value, setValue] = useState<string>(initialValue || "");
   const [urlError, setUrlError] = useState(false);
   const [name, setName] = useState<string | undefined>(undefined);
@@ -190,6 +191,7 @@ export function ConfirmProviderView({
   onConfirm,
 }: ConfirmProviderViewProps) {
   const [accepted, setAccepted] = useState(false);
+  const { i18n } = useTranslationContext();
 
   return (
     <Fragment>
diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx
index 65049d6b6..066763ef5 100644
--- a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx
@@ -14,7 +14,7 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
 */
 
-import { i18n } from "@gnu-taler/taler-util";
+import * as utils from "@gnu-taler/taler-util";
 import {
   ProviderInfo,
   ProviderPaymentStatus,
@@ -32,6 +32,7 @@ import {
   SmallLightText,
 } from "../components/styled";
 import { Time } from "../components/Time";
+import { useTranslationContext } from "../context/translation";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
 import * as wxApi from "../wxApi";
 
@@ -41,6 +42,7 @@ interface Props {
 }
 
 export function ProviderDetailPage({ pid: providerURL, onBack }: Props): VNode {
+  const { i18n } = useTranslationContext();
   async function getProviderInfo(): Promise<ProviderInfo | null> {
     //create a first list of backup info by currency
     const status = await wxApi.getBackupInfo();
@@ -100,6 +102,7 @@ export function ProviderView({
   onBack,
   onExtend,
 }: ViewProps): VNode {
+  const { i18n } = useTranslationContext();
   if (info === null) {
     return (
       <Fragment>
@@ -156,7 +159,7 @@ export function ProviderView({
             </p>
           </Fragment>
         )}
-        <p>{descriptionByStatus(info.paymentStatus)}</p>
+        <p>{descriptionByStatus(info.paymentStatus, i18n)}</p>
         <ButtonPrimary disabled onClick={onExtend}>
           <i18n.Translate>Extend</i18n.Translate>
         </ButtonPrimary>
@@ -219,6 +222,7 @@ export function ProviderView({
 }
 
 function Error({ info }: { info: ProviderInfo }): VNode {
+  const { i18n } = useTranslationContext();
   if (info.lastError) {
     return (
       <ErrorMessage
@@ -267,7 +271,10 @@ function Error({ info }: { info: ProviderInfo }): VNode {
   return <Fragment />;
 }
 
-function descriptionByStatus(status: ProviderPaymentStatus): VNode {
+function descriptionByStatus(
+  status: ProviderPaymentStatus,
+  i18n: typeof utils.i18n,
+): VNode {
   switch (status.type) {
     case ProviderPaymentType.Paid:
     case ProviderPaymentType.TermsChanged:
diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
index 5a54c2e41..526daa7a1 100644
--- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
@@ -1,7 +1,6 @@
 import {
   AmountJson,
   parsePaytoUri,
-  i18n,
   Amounts,
   segwitMinAmount,
   generateFakeSegwitAddress,
@@ -10,6 +9,7 @@ import { Fragment, h, VNode } from "preact";
 import { BankDetailsByPaytoType } from "../components/BankDetailsByPaytoType";
 import { QR } from "../components/QR";
 import { ButtonDestructive, WarningBox } from "../components/styled";
+import { useTranslationContext } from "../context/translation";
 import { amountToString } from "../utils/index";
 export interface Props {
   reservePub: string;
@@ -26,6 +26,7 @@ export function ReserveCreated({
   exchangeBaseUrl,
   amount,
 }: Props): VNode {
+  const { i18n } = useTranslationContext();
   const paytoURI = parsePaytoUri(payto);
   if (!paytoURI) {
     return (
diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.tsx
index 8456ca550..f806da6a7 100644
--- a/packages/taler-wallet-webextension/src/wallet/Settings.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Settings.tsx
@@ -14,9 +14,10 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
 */
 
-import { ExchangeListItem, i18n, Translate } from "@gnu-taler/taler-util";
+import { ExchangeListItem } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { Checkbox } from "../components/Checkbox";
+import { JustInDevMode } from "../components/JustInDevMode";
 import { SelectList } from "../components/SelectList";
 import {
   DestructiveText,
@@ -80,25 +81,12 @@ export function SettingsView({
   developerMode,
   toggleDeveloperMode,
 }: ViewProps): VNode {
-  const { lang, supportedLang, changeLanguage } = useTranslationContext();
+  const { i18n, lang, supportedLang, changeLanguage } = useTranslationContext();
 
   return (
     <Fragment>
       <section>
         <h2>
-          <i18n.Translate>Display</i18n.Translate>
-        </h2>
-        <Input>
-          <SelectList
-            label={<i18n.Translate>Current Language</i18n.Translate>}
-            list={supportedLang}
-            name="lang"
-            value={lang}
-            onChange={(v) => changeLanguage(v)}
-          />
-        </Input>
-
-        <h2>
           <i18n.Translate>Navigator</i18n.Translate>
         </h2>
         <Checkbox
@@ -206,6 +194,21 @@ export function SettingsView({
           enabled={developerMode}
           onToggle={toggleDeveloperMode}
         />
+
+        <JustInDevMode>
+          <h2>
+            <i18n.Translate>Display</i18n.Translate>
+          </h2>
+          <Input>
+            <SelectList
+              label={<i18n.Translate>Current Language</i18n.Translate>}
+              list={supportedLang}
+              name="lang"
+              value={lang}
+              onChange={(v) => changeLanguage(v)}
+            />
+          </Input>
+        </JustInDevMode>
       </section>
     </Fragment>
   );
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index cae70d60d..fc54d3c3a 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -17,7 +17,6 @@
 import {
   AmountLike,
   Amounts,
-  i18n,
   NotificationType,
   parsePaytoUri,
   Transaction,
@@ -46,6 +45,7 @@ import {
   WarningBox,
 } from "../components/styled";
 import { Time } from "../components/Time";
+import { useTranslationContext } from "../context/translation";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
 import * as wxApi from "../wxApi";
 
@@ -54,6 +54,7 @@ interface Props {
   goToWalletHistory: (currency?: string) => void;
 }
 export function TransactionPage({ tid, goToWalletHistory }: Props): VNode {
+  const { i18n } = useTranslationContext();
   async function getTransaction(): Promise<Transaction> {
     const res = await wxApi.getTransactions();
     const ts = res.transactions.filter((t) => t.transactionId === tid);
@@ -127,6 +128,8 @@ export function TransactionView({
     }
   }
 
+  const { i18n } = useTranslationContext();
+
   function TransactionTemplate({
     children,
   }: {
diff --git a/packages/taler-wallet-webextension/src/wallet/Welcome.tsx b/packages/taler-wallet-webextension/src/wallet/Welcome.tsx
index 7b28cb742..36b4b13fc 100644
--- a/packages/taler-wallet-webextension/src/wallet/Welcome.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Welcome.tsx
@@ -20,10 +20,11 @@
  * @author sebasjm
  */
 
-import { i18n, WalletDiagnostics } from "@gnu-taler/taler-util";
+import { WalletDiagnostics } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { Checkbox } from "../components/Checkbox";
 import { Diagnostics } from "../components/Diagnostics";
+import { useTranslationContext } from "../context/translation";
 import { useDiagnostics } from "../hooks/useDiagnostics";
 import { useExtendedPermissions } from "../hooks/useExtendedPermissions";
 
@@ -52,6 +53,7 @@ export function View({
   diagnostics,
   timedOut,
 }: ViewProps): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <Fragment>
       <h1>