take translator from transaltion context

14 files changed, 78 insertions, 48 deletions

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>