gnunet-svn
[Top][All Lists]
Advanced

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

[taler-wallet-core] branch master updated (33274586 -> 08959f83)


From: gnunet
Subject: [taler-wallet-core] branch master updated (33274586 -> 08959f83)
Date: Mon, 14 Mar 2022 19:21:32 +0100

This is an automated email from the git hooks/post-receive script.

sebasjm pushed a change to branch master
in repository wallet-core.

    from 33274586 wallet: towards db-less benchmarking, some refactoring
     new fda5eeb6 fix witdraw button cut-off when browser font-size is big
     new 85e5a24e fix button misaligned when font-size is increased
     new 1d7c8f70 WIP fixing translation context
     new 08959f83 take translator from transaltion context

The 4 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 .../src/NavigationBar.tsx                          |   4 +-
 .../src/components/BankDetailsByPaytoType.tsx      |   5 +-
 .../src/components/DebugCheckbox.tsx               |   4 +-
 .../src/components/Diagnostics.tsx                 |   4 +-
 .../src/components/EditableText.tsx                |   3 +-
 .../src/components/ErrorTalerOperation.tsx         |   2 +-
 .../src/components/Loading.tsx                     |  31 ++++--
 .../src/components/SelectList.tsx                  |   3 +-
 .../src/components/TransactionItem.tsx             |  11 +-
 .../src/components/styled/index.tsx                |   1 +
 .../src/context/translation.ts                     |  19 ++--
 .../taler-wallet-webextension/src/cta/Deposit.tsx  |   5 +-
 packages/taler-wallet-webextension/src/cta/Pay.tsx |   8 +-
 .../taler-wallet-webextension/src/cta/Refund.tsx   |   5 +-
 .../src/cta/TermsOfServiceSection.tsx              |   3 +-
 packages/taler-wallet-webextension/src/cta/Tip.tsx |   5 +-
 .../taler-wallet-webextension/src/cta/Withdraw.tsx |   8 +-
 .../src/cta/reset-required.tsx                     | 112 ---------------------
 .../src/cta/return-coins.tsx                       |   3 +-
 .../taler-wallet-webextension/src/hooks/useLang.ts |  14 +--
 .../src/hooks/useLocalStorage.ts                   |   5 +-
 .../src/popup/BalancePage.tsx                      |   4 +-
 .../src/popup/DeveloperPage.tsx                    |  22 ++--
 .../src/popup/NoBalanceHelp.tsx                    |   3 +-
 .../src/popup/TalerActionFound.tsx                 |   4 +-
 .../src/popupEntryPoint.tsx                        |   8 +-
 .../src/wallet/AddNewActionView.tsx                |  36 +++----
 .../src/wallet/BackupPage.tsx                      |   7 +-
 .../src/wallet/CreateManualWithdraw.tsx            |   4 +-
 .../src/wallet/DepositPage.tsx                     |   3 +-
 .../src/wallet/ExchangeAddConfirm.tsx              |   3 +-
 .../src/wallet/ExchangeSetUrl.tsx                  |   4 +-
 .../src/wallet/History.tsx                         |   4 +-
 .../src/wallet/ManualWithdrawPage.tsx              |   3 +-
 .../src/wallet/ProviderAddPage.tsx                 |   4 +-
 .../src/wallet/ProviderDetailPage.tsx              |  13 ++-
 .../src/wallet/ReserveCreated.tsx                  |   3 +-
 .../src/wallet/Settings.tsx                        |  33 +++---
 .../src/wallet/Transaction.tsx                     |   5 +-
 .../src/wallet/Welcome.tsx                         |   4 +-
 .../src/walletEntryPoint.tsx                       |   9 +-
 41 files changed, 203 insertions(+), 228 deletions(-)
 delete mode 100644 
packages/taler-wallet-webextension/src/cta/reset-required.tsx

diff --git a/packages/taler-wallet-webextension/src/NavigationBar.tsx 
b/packages/taler-wallet-webextension/src/NavigationBar.tsx
index 14619473..8d5c1fa4 100644
--- a/packages/taler-wallet-webextension/src/NavigationBar.tsx
+++ b/packages/taler-wallet-webextension/src/NavigationBar.tsx
@@ -24,10 +24,10 @@
 /**
  * Imports.
  */
-import { i18n, Translate } from "@gnu-taler/taler-util";
 import { VNode, h } from "preact";
 import { JustInDevMode } from "./components/JustInDevMode";
 import { NavigationHeader, NavigationHeaderHolder } from "./components/styled";
+import { useTranslationContext } from "./context/translation";
 
 /**
  * List of pages used by the wallet
@@ -61,6 +61,7 @@ export enum Pages {
 }
 
 export function PopupNavBar({ path = "" }: { path?: string }): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <NavigationHeader>
       <a href="/balance" class={path.startsWith("/balance") ? "active" : ""}>
@@ -78,6 +79,7 @@ export function PopupNavBar({ path = "" }: { path?: string 
}): VNode {
 }
 
 export function WalletNavBar({ path = "" }: { path?: string }): VNode {
+  const { i18n } = useTranslationContext();
   return (
     <NavigationHeaderHolder>
       <NavigationHeader>
diff --git 
a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx 
b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
index e9a32ebf..f55f5c84 100644
--- 
a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
+++ 
b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
@@ -14,9 +14,10 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { PaytoUri, i18n } from "@gnu-taler/taler-util";
+import { PaytoUri } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
+import { useTranslationContext } from "../context/translation";
 import { CopiedIcon, CopyIcon } from "../svg";
 import { ButtonBox, TooltipRight } from "./styled";
 
@@ -33,6 +34,8 @@ export function BankDetailsByPaytoType({
   exchangeBaseUrl,
   amount,
 }: BankDetailsProps): VNode {
+  const { i18n } = useTranslationContext();
+
   const firstPart = !payto ? undefined : !payto.isKnown ? (
     <Row
       name={<i18n.Translate>Account</i18n.Translate>}
diff --git 
a/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx 
b/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx
index b5ad7cda..dc42b9ef 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 b136ebc2..0998cab7 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 8d45cae9..8f342ef2 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/ErrorTalerOperation.tsx 
b/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx
index 4852a71b..35670909 100644
--- a/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx
+++ b/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx
@@ -48,7 +48,7 @@ export function ErrorTalerOperation({
             <img
               style={{
                 transform: !showErrorDetail ? undefined : "scaleY(-1)",
-                height: "1.5em",
+                height: 24,
               }}
               src={arrowDown}
             />
diff --git a/packages/taler-wallet-webextension/src/components/Loading.tsx 
b/packages/taler-wallet-webextension/src/components/Loading.tsx
index 7504034a..d28953a1 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 676fd672..122b473b 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 b17dfce8..42afe5ea 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/components/styled/index.tsx 
b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index 92f149ea..608e4af7 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -143,6 +143,7 @@ export const Middle = styled.div`
 export const PopupBox = styled.div<{ noPadding?: boolean; devMode: boolean }>`
   height: 290px;
   width: 500px;
+  overflow-y: scroll;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
diff --git a/packages/taler-wallet-webextension/src/context/translation.ts 
b/packages/taler-wallet-webextension/src/context/translation.ts
index abbda548..82ea41e3 100644
--- a/packages/taler-wallet-webextension/src/context/translation.ts
+++ b/packages/taler-wallet-webextension/src/context/translation.ts
@@ -25,12 +25,14 @@ import { useLang } from "../hooks/useLang";
 //@ts-ignore: type declaration
 import * as jedLib from "jed";
 import { strings } from "../i18n/strings";
-import { setupI18n } from "@gnu-taler/taler-util";
+import { setupI18n, i18n } from "@gnu-taler/taler-util";
 
 interface Type {
   lang: string;
   supportedLang: { [id in keyof typeof supportedLang]: string }
   changeLanguage: (l: string) => void;
+  i18n: typeof i18n;
+  isSaved: boolean;
 }
 
 const supportedLang = {
@@ -43,7 +45,8 @@ const supportedLang = {
   it: "Italiano [it]",
   // ko: "한국어 [ko]",
   // ru: "Ру́сский язы́к [ru]",
-  tr: "Türk [tr]"
+  tr: "Türk [tr]",
+  navigator: "Defined by navigator",
 };
 
 
@@ -53,6 +56,8 @@ const initial = {
   changeLanguage: () => {
     // do not change anything
   },
+  i18n,
+  isSaved: false,
 };
 const Context = createContext<Type>(initial);
 
@@ -62,18 +67,12 @@ interface Props {
   forceLang?: string;
 }
 
-//we use forceLang when we don't want to use the saved state, but sone forced
-//runtime lang predefined lang
 export const TranslationProvider = ({
   initial,
   children,
   forceLang,
 }: Props): VNode => {
-  const [lang, changeLanguage2] = useLang(initial);
-  function changeLanguage(s: string) {
-    console.log("trying to change lang to ", s, "current lang", lang)
-    changeLanguage2(s)
-  }
+  const [lang, changeLanguage, isSaved] = useLang(initial);
   useEffect(() => {
     if (forceLang) {
       changeLanguage(forceLang);
@@ -87,7 +86,7 @@ export const TranslationProvider = ({
   } else {
     setupI18n(lang, strings);
   }
-  return h(Context.Provider, { value: { lang, changeLanguage, supportedLang }, 
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 82d898d7..ac6c1fd6 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 4fe44dcf..ba31f4c3 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 8ce008bc..efc436bc 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 1244b791..cafc43c6 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 ff86ce8c..71aa04a2 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 7c9745dd..8535c67e 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 350c32d7..00000000
--- 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 1d688fa0..e7a784e2 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 cc4ff3fc..95929764 100644
--- a/packages/taler-wallet-webextension/src/hooks/useLang.ts
+++ b/packages/taler-wallet-webextension/src/hooks/useLang.ts
@@ -16,11 +16,13 @@
 
 import { useNotNullLocalStorage } from "./useLocalStorage";
 
-export function useLang(initial?: string): [string, (s: string) => void] {
-  const browserLang: string | undefined =
-    typeof window !== "undefined"
-      ? navigator.language || (navigator as any).userLanguage
-      : undefined;
-  const defaultLang = (browserLang || initial || "en").substring(0, 2);
+function getBrowserLang(): string | 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);
 }
diff --git a/packages/taler-wallet-webextension/src/hooks/useLocalStorage.ts 
b/packages/taler-wallet-webextension/src/hooks/useLocalStorage.ts
index 3883aff0..4be82976 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 53b4e151..c894c333 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 228c3cdf..3144a9ce 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 b8b21b24..dfb99ac6 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 40b76a28..9ac83a57 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/popupEntryPoint.tsx 
b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
index c076f667..6a58648b 100644
--- a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
+++ b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
@@ -20,7 +20,7 @@
  * @author sebasjm <dold@taler.net>
  */
 
-import { setupI18n, i18n } from "@gnu-taler/taler-util";
+import { setupI18n } from "@gnu-taler/taler-util";
 import { createHashHistory } from "history";
 import { Fragment, h, render, VNode } from "preact";
 import Router, { route, Route } from "preact-router";
@@ -30,7 +30,10 @@ import PendingTransactions from 
"./components/PendingTransactions";
 import { PopupBox } from "./components/styled";
 import { DevContextProvider } from "./context/devContext";
 import { IoCProviderForRuntime } from "./context/iocContext";
-import { TranslationProvider } from "./context/translation";
+import {
+  TranslationProvider,
+  useTranslationContext,
+} from "./context/translation";
 import { useTalerActionURL } from "./hooks/useTalerActionURL";
 import { strings } from "./i18n/strings";
 import { Pages, PopupNavBar } from "./NavigationBar";
@@ -193,6 +196,7 @@ function RedirectToWalletPage(): VNode {
       },
     );
   });
+  const { i18n } = useTranslationContext();
   return (
     <span>
       <i18n.Translate>
diff --git a/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx 
b/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx
index 229fab7b..04ed5ec5 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 a5821d48..39afe844 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 96644be2..0ee83c26 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 d1d618e9..a5b5997b 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 1ffca827..1b40fe78 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 7199ce90..62d7e15b 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 e0a1c588..ea6057d0 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 d9a1544a..6d9b9d2b 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 6bb5b683..051aff0b 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 65049d6b..066763ef 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 5a54c2e4..526daa7a 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 8456ca55..f806da6a 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,24 +81,11 @@ 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>
@@ -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 cae70d60..fc54d3c3 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 7b28cb74..36b4b13f 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>
diff --git a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx 
b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
index e37bf149..9f96a03e 100644
--- a/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
+++ b/packages/taler-wallet-webextension/src/walletEntryPoint.tsx
@@ -20,7 +20,7 @@
  * @author sebasjm <dold@taler.net>
  */
 
-import { i18n, setupI18n } from "@gnu-taler/taler-util";
+import { setupI18n } from "@gnu-taler/taler-util";
 import { createHashHistory } from "history";
 import { Fragment, h, render, VNode } from "preact";
 import Router, { route, Route } from "preact-router";
@@ -36,7 +36,10 @@ import {
 } from "./components/styled";
 import { DevContextProvider } from "./context/devContext";
 import { IoCProviderForRuntime } from "./context/iocContext";
-import { TranslationProvider } from "./context/translation";
+import {
+  TranslationProvider,
+  useTranslationContext,
+} from "./context/translation";
 import { PayPage } from "./cta/Pay";
 import { RefundPage } from "./cta/Refund";
 import { TipPage } from "./cta/Tip";
@@ -94,6 +97,8 @@ function Application(): VNode {
       setGlobalNotification(undefined);
     }
   }
+  const { i18n } = useTranslationContext();
+
   return (
     <TranslationProvider>
       <DevContextProvider>

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.



reply via email to

[Prev in Thread] Current Thread [Next in Thread]