diff options
Diffstat (limited to 'packages/taler-wallet-webextension')
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'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> |