diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet')
29 files changed, 238 insertions, 341 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/index.ts b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/index.ts index 10fcd84ce..4ec4c0ffe 100644 --- a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/index.ts +++ b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/index.ts @@ -16,8 +16,9 @@ import { TalerErrorDetail } from "@gnu-taler/taler-util"; import { SyncTermsOfServiceResponse } from "@gnu-taler/taler-wallet-core"; +import { ErrorAlertView } from "../../components/CurrentAlerts.js"; import { Loading } from "../../components/Loading.js"; -import { HookError } from "../../hooks/useAsyncAsHook.js"; +import { ErrorAlert } from "../../context/alert.js"; import { ButtonHandler, TextFieldHandler, @@ -25,11 +26,7 @@ import { } from "../../mui/handlers.js"; import { compose, StateViewMap } from "../../utils/index.js"; import { useComponentState } from "./state.js"; -import { - ConfirmProviderView, - LoadingUriView, - SelectProviderView, -} from "./views.js"; +import { ConfirmProviderView, SelectProviderView } from "./views.js"; export interface Props { onBack: () => Promise<void>; @@ -50,8 +47,8 @@ export namespace State { } export interface LoadingUriError { - status: "loading-error"; - error: HookError; + status: "error"; + error: ErrorAlert; } export interface ConfirmProvider { @@ -77,7 +74,7 @@ export namespace State { const viewMapping: StateViewMap<State> = { loading: Loading, - "loading-error": LoadingUriView, + error: ErrorAlertView, "select-provider": SelectProviderView, "confirm-provider": ConfirmProviderView, }; diff --git a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/views.tsx b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/views.tsx index b633a595f..c3afc0d33 100644 --- a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/views.tsx +++ b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/views.tsx @@ -17,12 +17,10 @@ import { Amounts } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { Checkbox } from "../../components/Checkbox.js"; -import { LoadingError } from "../../components/LoadingError.js"; import { LightText, SmallLightText, SubTitle, - TermsOfService, Title, } from "../../components/styled/index.js"; import { useTranslationContext } from "../../context/translation.js"; @@ -30,17 +28,6 @@ import { Button } from "../../mui/Button.js"; import { TextField } from "../../mui/TextField.js"; import { State } from "./index.js"; -export function LoadingUriView({ error }: State.LoadingUriError): VNode { - const { i18n } = useTranslationContext(); - - return ( - <LoadingError - title={<i18n.Translate>Could not load</i18n.Translate>} - error={error} - /> - ); -} - export function ConfirmProviderView({ url, provider, @@ -88,9 +75,8 @@ export function ConfirmProviderView({ of service </i18n.Translate> </p> - {/* replace with <TermsOfService /> */} <Checkbox - label={<i18n.Translate>Accept terms of service</i18n.Translate>} + label={i18n.str`Accept terms of service`} name="terms" onToggle={tos.button.onClick} enabled={tos.value} diff --git a/packages/taler-wallet-webextension/src/wallet/Application.tsx b/packages/taler-wallet-webextension/src/wallet/Application.tsx index 372db847c..46fe02225 100644 --- a/packages/taler-wallet-webextension/src/wallet/Application.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Application.tsx @@ -25,13 +25,17 @@ import { createHashHistory } from "history"; import { ComponentChildren, Fragment, h, VNode } from "preact"; import Router, { route, Route } from "preact-router"; import { useEffect } from "preact/hooks"; +import { CurrentAlerts } from "../components/CurrentAlerts.js"; import { LogoHeader } from "../components/LogoHeader.js"; import PendingTransactions from "../components/PendingTransactions.js"; import { + Link, + LinkPrimary, SubTitle, WalletAction, WalletBox, } from "../components/styled/index.js"; +import { AlertProvider } from "../context/alert.js"; import { DevContextProvider } from "../context/devContext.js"; import { IoCProviderForRuntime } from "../context/iocContext.js"; import { @@ -66,6 +70,7 @@ import { QrReaderPage } from "./QrReader.js"; import { SettingsPage } from "./Settings.js"; import { TransactionPage } from "./Transaction.js"; import { WelcomePage } from "./Welcome.js"; +import CloseIcon from "../svg/close_24px.svg"; export function Application(): VNode { const { i18n } = useTranslationContext(); @@ -495,15 +500,6 @@ function matchesRoute(url: string, route: string): boolean { return !result ? false : true; } -function shouldShowPendingOperations(url: string): boolean { - return [ - Pages.balanceHistory.pattern, - Pages.dev, - Pages.settings, - Pages.backup, - ].some((p) => matchesRoute(url, p)); -} - function CallToActionTemplate({ title, children, @@ -511,11 +507,35 @@ function CallToActionTemplate({ title: TranslatedString; children: ComponentChildren; }): VNode { + const { i18n } = useTranslationContext(); return ( <WalletAction> <LogoHeader /> + <section style={{ display: "flex", justifyContent: "right", margin: 0 }}> + <LinkPrimary href={Pages.balance}> + <div + style={{ + height: 24, + width: 24, + marginLeft: 4, + marginRight: 4, + border: "1px solid black", + borderRadius: 12, + }} + dangerouslySetInnerHTML={{ __html: CloseIcon }} + /> + </LinkPrimary> + </section> <SubTitle>{title}</SubTitle> - {children} + <AlertProvider> + <CurrentAlerts /> + {children} + </AlertProvider> + <section style={{ display: "flex", justifyContent: "right" }}> + <LinkPrimary href={Pages.balance}> + <i18n.Translate>Return to wallet</i18n.Translate> + </LinkPrimary> + </section> </WalletAction> ); } @@ -536,7 +556,10 @@ function WalletTemplate({ {goToTransaction ? ( <PendingTransactions goToTransaction={goToTransaction} /> ) : undefined} - <WalletBox>{children}</WalletBox> + <CurrentAlerts /> + <WalletBox> + <AlertProvider>{children}</AlertProvider> + </WalletBox> </Fragment> ); } diff --git a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx index 6e987f965..48c9c9cb1 100644 --- a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx @@ -29,8 +29,8 @@ import { } from "date-fns"; import { Fragment, h, VNode } from "preact"; import { useEffect, useState } from "preact/hooks"; +import { AlertView } from "../components/CurrentAlerts.js"; import { Loading } from "../components/Loading.js"; -import { LoadingError } from "../components/LoadingError.js"; import { QR } from "../components/QR.js"; import { BoldLight, @@ -42,6 +42,7 @@ import { SmallText, WarningBox, } from "../components/styled/index.js"; +import { alertFromError } from "../context/alert.js"; import { useBackendContext } from "../context/backend.js"; import { useTranslationContext } from "../context/translation.js"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; @@ -117,9 +118,11 @@ export function BackupPage({ onAddProvider }: Props): VNode { } if (status.hasError) { return ( - <LoadingError - title={<i18n.Translate>Could not load backup providers</i18n.Translate>} - error={status} + <AlertView + alert={alertFromError( + i18n.str`Could not load backup providers`, + status, + )} /> ); } @@ -219,11 +222,9 @@ export function BackupView({ </div> <div> <Button variant="contained" onClick={onSyncAll}> - {providers.length > 1 ? ( - <i18n.Translate>Sync all backups</i18n.Translate> - ) : ( - <i18n.Translate>Sync now</i18n.Translate> - )} + {providers.length > 1 + ? i18n.str`Sync all backups` + : i18n.str`Sync now`} </Button> <Button variant="contained" color="success" onClick={onAddProvider}> <i18n.Translate>Add provider</i18n.Translate> diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts index 6ffbccc27..6de406400 100644 --- a/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts +++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts @@ -15,8 +15,9 @@ */ import { AmountJson, PaytoUri } from "@gnu-taler/taler-util"; +import { ErrorAlertView } from "../../components/CurrentAlerts.js"; import { Loading } from "../../components/Loading.js"; -import { HookError } from "../../hooks/useAsyncAsHook.js"; +import { ErrorAlert } from "../../context/alert.js"; import { AmountFieldHandler, ButtonHandler, @@ -27,7 +28,6 @@ import { ManageAccountPage } from "../ManageAccount/index.js"; import { useComponentState } from "./state.js"; import { AmountOrCurrencyErrorView, - LoadingErrorView, NoAccountToDepositView, NoEnoughBalanceView, ReadyView, @@ -56,8 +56,8 @@ export namespace State { } export interface LoadingUriError { - status: "loading-error"; - error: HookError; + status: "error"; + error: ErrorAlert; } export interface AddingAccount { @@ -107,7 +107,7 @@ export namespace State { const viewMapping: StateViewMap<State> = { loading: Loading, - "loading-error": LoadingErrorView, + error: ErrorAlertView, "amount-or-currency-error": AmountOrCurrencyErrorView, "no-enough-balance": NoEnoughBalanceView, "no-accounts": NoAccountToDepositView, diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts index 02e85a1c7..b597c77be 100644 --- a/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts +++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts @@ -25,7 +25,9 @@ import { } from "@gnu-taler/taler-util"; import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; import { useState } from "preact/hooks"; +import { alertFromError } from "../../context/alert.js"; import { useBackendContext } from "../../context/backend.js"; +import { useTranslationContext } from "../../context/translation.js"; import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js"; import { Props, State } from "./index.js"; @@ -36,6 +38,7 @@ export function useComponentState({ onSuccess, }: Props): State { const api = useBackendContext(); + const { i18n } = useTranslationContext(); const parsed = amountStr === undefined ? undefined : Amounts.parse(amountStr); const currency = parsed !== undefined ? parsed.currency : currencyStr; @@ -82,8 +85,8 @@ export function useComponentState({ } if (hook.hasError) { return { - status: "loading-error", - error: hook, + status: "error", + error: alertFromError(i18n.str`Could not load balance information`, hook), }; } const { accounts, balances } = hook.response; diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/views.tsx b/packages/taler-wallet-webextension/src/wallet/DepositPage/views.tsx index 6a28f31e1..0d827db43 100644 --- a/packages/taler-wallet-webextension/src/wallet/DepositPage/views.tsx +++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/views.tsx @@ -18,31 +18,13 @@ import { Amounts, PaytoUri } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { AmountField } from "../../components/AmountField.js"; import { ErrorMessage } from "../../components/ErrorMessage.js"; -import { LoadingError } from "../../components/LoadingError.js"; import { SelectList } from "../../components/SelectList.js"; -import { - ErrorText, - Input, - InputWithLabel, - SubTitle, - WarningBox, -} from "../../components/styled/index.js"; +import { Input, SubTitle, WarningBox } from "../../components/styled/index.js"; import { useTranslationContext } from "../../context/translation.js"; import { Button } from "../../mui/Button.js"; import { Grid } from "../../mui/Grid.js"; import { State } from "./index.js"; -export function LoadingErrorView({ error }: State.LoadingUriError): VNode { - const { i18n } = useTranslationContext(); - - return ( - <LoadingError - title={<i18n.Translate>Could not load deposit balance</i18n.Translate>} - error={error} - /> - ); -} - export function AmountOrCurrencyErrorView( p: State.AmountOrCurrencyError, ): VNode { @@ -50,11 +32,7 @@ export function AmountOrCurrencyErrorView( return ( <ErrorMessage - title={ - <i18n.Translate> - A currency or an amount should be indicated - </i18n.Translate> - } + title={i18n.str`A currency or an amount should be indicated`} /> ); } @@ -66,11 +44,7 @@ export function NoEnoughBalanceView({ return ( <ErrorMessage - title={ - <i18n.Translate> - There is no enough balance to make a deposit for currency {currency} - </i18n.Translate> - } + title={i18n.str`There is no enough balance to make a deposit for currency ${currency}`} /> ); } @@ -150,7 +124,7 @@ export function ReadyView(state: State.Ready): VNode { > <Input> <SelectList - label={<i18n.Translate>Select account</i18n.Translate>} + label={i18n.str`Select account`} list={state.account.list} name="account" value={state.account.value} @@ -171,14 +145,11 @@ export function ReadyView(state: State.Ready): VNode { </p> <Grid container spacing={2} columns={1}> <Grid item xs={1}> - <AmountField - label={<i18n.Translate>Amount</i18n.Translate>} - handler={state.amount} - /> + <AmountField label={i18n.str`Amount`} handler={state.amount} /> </Grid> <Grid item xs={1}> <AmountField - label={<i18n.Translate>Deposit fee</i18n.Translate>} + label={i18n.str`Deposit fee`} handler={{ value: state.totalFee, }} @@ -186,7 +157,7 @@ export function ReadyView(state: State.Ready): VNode { </Grid> <Grid item xs={1}> <AmountField - label={<i18n.Translate>Total deposit</i18n.Translate>} + label={i18n.str`Total deposit`} handler={{ value: state.totalToDeposit, }} diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/index.ts b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/index.ts index f1e766a18..bd6b32e78 100644 --- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/index.ts +++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/index.ts @@ -14,12 +14,13 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ +import { ErrorAlertView } from "../../components/CurrentAlerts.js"; import { Loading } from "../../components/Loading.js"; -import { HookError } from "../../hooks/useAsyncAsHook.js"; +import { ErrorAlert } from "../../context/alert.js"; import { AmountFieldHandler, ButtonHandler } from "../../mui/handlers.js"; import { compose, StateViewMap } from "../../utils/index.js"; import { useComponentState } from "./state.js"; -import { LoadingUriView, ReadyView, SelectCurrencyView } from "./views.js"; +import { ReadyView, SelectCurrencyView } from "./views.js"; export type Props = PropsGet | PropsSend; @@ -49,8 +50,8 @@ export namespace State { } export interface LoadingUriError { - status: "loading-error"; - error: HookError; + status: "error"; + error: ErrorAlert; } export interface SelectCurrency { @@ -80,7 +81,7 @@ export type Contact = { const viewMapping: StateViewMap<State> = { loading: Loading, - "loading-error": LoadingUriView, + error: ErrorAlertView, "select-currency": SelectCurrencyView, ready: ReadyView, }; diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts index dd711f406..1fe324c5a 100644 --- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts +++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts @@ -17,7 +17,9 @@ import { Amounts } from "@gnu-taler/taler-util"; import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; import { useState } from "preact/hooks"; +import { alertFromError } from "../../context/alert.js"; import { useBackendContext } from "../../context/backend.js"; +import { useTranslationContext } from "../../context/translation.js"; import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js"; import { assertUnreachable, RecursiveState } from "../../utils/index.js"; import { Contact, Props, State } from "./index.js"; @@ -59,6 +61,8 @@ export function useComponentState(props: Props): RecursiveState<State> { if (!amount) { return () => { // eslint-disable-next-line react-hooks/rules-of-hooks + const { i18n } = useTranslationContext(); + // eslint-disable-next-line react-hooks/rules-of-hooks const hook = useAsyncAsHook(() => api.wallet.call(WalletApiOperation.ListExchanges, {}), ); @@ -71,8 +75,8 @@ export function useComponentState(props: Props): RecursiveState<State> { } if (hook.hasError) { return { - status: "loading-error", - error: hook, + status: "error", + error: alertFromError(i18n.str`Could not load exchanges`, hook), }; } const currencies: Record<string, string> = {}; diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx index a9a4b2e41..8a7a1fa97 100644 --- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx +++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx @@ -16,7 +16,7 @@ import { styled } from "@linaria/react"; import { Fragment, h, VNode } from "preact"; -import { LoadingError } from "../../components/LoadingError.js"; +import { AmountField } from "../../components/AmountField.js"; import { SelectList } from "../../components/SelectList.js"; import { Input, @@ -25,24 +25,14 @@ import { SvgIcon, } from "../../components/styled/index.js"; import { useTranslationContext } from "../../context/translation.js"; -import { Pages } from "../../NavigationBar.js"; -import { Contact, State } from "./index.js"; -import arrowIcon from "../../svg/chevron-down.svg"; -import { AmountField } from "../../components/AmountField.js"; +import { Button } from "../../mui/Button.js"; import { Grid } from "../../mui/Grid.js"; import { Paper } from "../../mui/Paper.js"; -import { Button } from "../../mui/Button.js"; +import { Pages } from "../../NavigationBar.js"; +import arrowIcon from "../../svg/chevron-down.svg"; +import bankIcon from "../../svg/ri-bank-line.svg"; import { assertUnreachable } from "../../utils/index.js"; - -export function LoadingUriView({ error }: State.LoadingUriError): VNode { - const { i18n } = useTranslationContext(); - return ( - <LoadingError - title={<i18n.Translate>Could not load</i18n.Translate>} - error={error} - /> - ); -} +import { Contact, State } from "./index.js"; export function SelectCurrencyView({ currencies, @@ -61,7 +51,7 @@ export function SelectCurrencyView({ <p> <Input> <SelectList - label={<i18n.Translate>Known currencies</i18n.Translate>} + label={i18n.str`Known currencies`} list={currencies} name="lang" value={""} @@ -214,7 +204,7 @@ export function ReadyGetView({ </h1> <Grid container columns={2} justifyContent="space-between"> <AmountField - label={<i18n.Translate>Amount</i18n.Translate>} + label={i18n.str`Amount`} required handler={amountHandler} /> @@ -304,7 +294,7 @@ export function ReadySendView({ <div> <AmountField - label={<i18n.Translate>Amount</i18n.Translate>} + label={i18n.str`Amount`} required handler={amountHandler} /> @@ -377,7 +367,6 @@ export function ReadySendView({ </Container> ); } -import bankIcon from "../../svg/ri-bank-line.svg"; function RowExample({ info, diff --git a/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/index.ts b/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/index.ts index 95badb218..afbaf1945 100644 --- a/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/index.ts +++ b/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/index.ts @@ -14,11 +14,12 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ +import { ErrorAlertView } from "../../components/CurrentAlerts.js"; import { Loading } from "../../components/Loading.js"; -import { HookError } from "../../hooks/useAsyncAsHook.js"; +import { ErrorAlert } from "../../context/alert.js"; import { compose, StateViewMap } from "../../utils/index.js"; import { useComponentState } from "./state.js"; -import { LoadingUriView, ReadyView } from "./views.js"; +import { ReadyView } from "./views.js"; export interface Props { p: string; @@ -33,8 +34,8 @@ export namespace State { } export interface LoadingUriError { - status: "loading-error"; - error: HookError; + status: "error"; + error: ErrorAlert; } export interface BaseInfo { @@ -48,7 +49,7 @@ export namespace State { const viewMapping: StateViewMap<State> = { loading: Loading, - "loading-error": LoadingUriView, + error: ErrorAlertView, ready: ReadyView, }; diff --git a/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/views.tsx b/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/views.tsx index 5784a7db5..dc8a42b84 100644 --- a/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/views.tsx +++ b/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/views.tsx @@ -15,21 +15,9 @@ */ import { h, VNode } from "preact"; -import { LoadingError } from "../../components/LoadingError.js"; import { useTranslationContext } from "../../context/translation.js"; import { State } from "./index.js"; -export function LoadingUriView({ error }: State.LoadingUriError): VNode { - const { i18n } = useTranslationContext(); - - return ( - <LoadingError - title={<i18n.Translate>Could not load</i18n.Translate>} - error={error} - /> - ); -} - export function ReadyView({ error }: State.Ready): VNode { const { i18n } = useTranslationContext(); diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts index 10e44ce7d..299c236c4 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts @@ -20,7 +20,9 @@ import { ExchangeListItem, FeeDescriptionPair, } from "@gnu-taler/taler-util"; +import { ErrorAlertView } from "../../components/CurrentAlerts.js"; import { Loading } from "../../components/Loading.js"; +import { ErrorAlert } from "../../context/alert.js"; import { HookError } from "../../hooks/useAsyncAsHook.js"; import { State as SelectExchangeState } from "../../hooks/useSelectedExchange.js"; import { ButtonHandler, SelectFieldHandler } from "../../mui/handlers.js"; @@ -28,7 +30,6 @@ import { compose, StateViewMap } from "../../utils/index.js"; import { useComponentState } from "./state.js"; import { ComparingView, - ErrorLoadingView, NoExchangesView, PrivacyContentView, ReadyView, @@ -58,8 +59,8 @@ export namespace State { } export interface LoadingUriError { - status: "error-loading"; - error: HookError; + status: "error"; + error: ErrorAlert; } export interface BaseInfo { @@ -99,7 +100,7 @@ export namespace State { const viewMapping: StateViewMap<State> = { loading: Loading, - "error-loading": ErrorLoadingView, + error: ErrorAlertView, comparing: ComparingView, "no-exchange": NoExchangesView, "showing-tos": TosContentView, diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts index 3c10febd9..cfb32cbbb 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts @@ -20,7 +20,9 @@ import { WalletApiOperation, } from "@gnu-taler/taler-wallet-core"; import { useState } from "preact/hooks"; +import { alertFromError } from "../../context/alert.js"; import { useBackendContext } from "../../context/backend.js"; +import { useTranslationContext } from "../../context/translation.js"; import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js"; import { Props, State } from "./index.js"; @@ -31,6 +33,7 @@ export function useComponentState({ currentExchange, }: Props): State { const api = useBackendContext(); + const { i18n } = useTranslationContext(); const initialValue = exchanges.findIndex( (e) => e.exchangeBaseUrl === currentExchange, ); @@ -84,8 +87,11 @@ export function useComponentState({ } if (hook.hasError) { return { - status: "error-loading", - error: hook, + status: "error", + error: alertFromError( + i18n.str`Could not load exchange details info`, + hook, + ), }; } diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx index 26ff2c0d3..d01ce7ca0 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx @@ -20,7 +20,6 @@ import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { Amount } from "../../components/Amount.js"; import { ErrorMessage } from "../../components/ErrorMessage.js"; -import { LoadingError } from "../../components/LoadingError.js"; import { SelectList } from "../../components/SelectList.js"; import { Input, SvgIcon } from "../../components/styled/index.js"; import { TermsOfService } from "../../components/TermsOfService/index.js"; @@ -110,17 +109,6 @@ const Container = styled.div` } `; -export function ErrorLoadingView({ error }: State.LoadingUriError): VNode { - const { i18n } = useTranslationContext(); - - return ( - <LoadingError - title={<i18n.Translate>Could not load exchange fees</i18n.Translate>} - error={error} - /> - ); -} - export function PrivacyContentView({ exchangeUrl, onClose, @@ -156,19 +144,11 @@ export function NoExchangesView({ }: SelectExchangeState.NoExchange): VNode { const { i18n } = useTranslationContext(); if (!currency) { - return ( - <ErrorMessage - title={<i18n.Translate>Could not find any exchange</i18n.Translate>} - /> - ); + return <ErrorMessage title={i18n.str`Could not find any exchange`} />; } return ( <ErrorMessage - title={ - <i18n.Translate> - Could not find any exchange for the currency {currency} - </i18n.Translate> - } + title={i18n.str`Could not find any exchange for the currency ${currency}`} /> ); } diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx index 8c31d8d95..404fc8bee 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx @@ -140,15 +140,13 @@ export function ExchangeSetUrlPage({ )} {error && ( <ErrorMessage - title={ - <i18n.Translate>Unable to verify this exchange</i18n.Translate> - } + title={i18n.str`Unable to verify this exchange`} description={error} /> )} {confirmationError && ( <ErrorMessage - title={<i18n.Translate>Unable to add this exchange</i18n.Translate>} + title={i18n.str`Unable to add this exchange`} description={confirmationError} /> )} diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx index 50f634f52..143d3adbb 100644 --- a/packages/taler-wallet-webextension/src/wallet/History.tsx +++ b/packages/taler-wallet-webextension/src/wallet/History.tsx @@ -23,8 +23,8 @@ import { import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; import { Fragment, h, VNode } from "preact"; import { useEffect, useState } from "preact/hooks"; +import { AlertView } from "../components/CurrentAlerts.js"; import { Loading } from "../components/Loading.js"; -import { LoadingError } from "../components/LoadingError.js"; import { CenteredBoldText, CenteredText, @@ -33,6 +33,7 @@ import { } from "../components/styled/index.js"; import { Time } from "../components/Time.js"; import { TransactionItem } from "../components/TransactionItem.js"; +import { alertFromError } from "../context/alert.js"; import { useBackendContext } from "../context/backend.js"; import { useTranslationContext } from "../context/translation.js"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; @@ -71,13 +72,11 @@ export function HistoryPage({ if (state.hasError) { return ( - <LoadingError - title={ - <i18n.Translate> - Could not load the list of transactions - </i18n.Translate> - } - error={state} + <AlertView + alert={alertFromError( + i18n.str`Could not load the list of transactions`, + state, + )} /> ); } diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/index.ts b/packages/taler-wallet-webextension/src/wallet/ManageAccount/index.ts index 8541821b7..3a00d48ce 100644 --- a/packages/taler-wallet-webextension/src/wallet/ManageAccount/index.ts +++ b/packages/taler-wallet-webextension/src/wallet/ManageAccount/index.ts @@ -15,8 +15,9 @@ */ import { KnownBankAccountsInfo } from "@gnu-taler/taler-util"; +import { ErrorAlertView } from "../../components/CurrentAlerts.js"; import { Loading } from "../../components/Loading.js"; -import { HookError } from "../../hooks/useAsyncAsHook.js"; +import { ErrorAlert } from "../../context/alert.js"; import { ButtonHandler, SelectFieldHandler, @@ -24,7 +25,7 @@ import { } from "../../mui/handlers.js"; import { compose, StateViewMap } from "../../utils/index.js"; import { useComponentState } from "./state.js"; -import { LoadingUriView, ReadyView } from "./views.js"; +import { ReadyView } from "./views.js"; export interface Props { currency: string; @@ -41,8 +42,8 @@ export namespace State { } export interface LoadingUriError { - status: "loading-error"; - error: HookError; + status: "error"; + error: ErrorAlert; } export interface BaseInfo { @@ -68,7 +69,7 @@ export type AccountByType = { const viewMapping: StateViewMap<State> = { loading: Loading, - "loading-error": LoadingUriView, + error: ErrorAlertView, ready: ReadyView, }; diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts b/packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts index 9690a5c79..176a8d100 100644 --- a/packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts +++ b/packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts @@ -21,7 +21,9 @@ import { } from "@gnu-taler/taler-util"; import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; import { useState } from "preact/hooks"; +import { alertFromError } from "../../context/alert.js"; import { useBackendContext } from "../../context/backend.js"; +import { useTranslationContext } from "../../context/translation.js"; import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js"; import { AccountByType, Props, State } from "./index.js"; @@ -31,6 +33,7 @@ export function useComponentState({ onCancel, }: Props): State { const api = useBackendContext(); + const { i18n } = useTranslationContext(); const hook = useAsyncAsHook(() => api.wallet.call(WalletApiOperation.ListKnownBankAccounts, { currency }), ); @@ -47,8 +50,8 @@ export function useComponentState({ } if (hook.hasError) { return { - status: "loading-error", - error: hook, + status: "error", + error: alertFromError(i18n.str`Could not load known bank accounts`, hook), }; } diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx b/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx index 3af0d5505..e5be8d17d 100644 --- a/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx @@ -23,11 +23,10 @@ import { import { styled } from "@linaria/react"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; -import { LoadingError } from "../../components/LoadingError.js"; +import { ErrorMessage } from "../../components/ErrorMessage.js"; import { SelectList } from "../../components/SelectList.js"; import { Input, - LightText, SubTitle, SvgIcon, WarningText, @@ -37,10 +36,9 @@ import { Button } from "../../mui/Button.js"; import { TextFieldHandler } from "../../mui/handlers.js"; import { TextField } from "../../mui/TextField.js"; import checkIcon from "../../svg/check_24px.svg"; -import warningIcon from "../../svg/warning_24px.svg"; import deleteIcon from "../../svg/delete_24px.svg"; +import warningIcon from "../../svg/warning_24px.svg"; import { State } from "./index.js"; -import { ErrorMessage } from "../../components/ErrorMessage.js"; type AccountType = "bitcoin" | "x-taler-bank" | "iban"; type ComponentFormByAccountType = { @@ -80,17 +78,6 @@ const AccountTable = styled.table` } `; -export function LoadingUriView({ error }: State.LoadingUriError): VNode { - const { i18n } = useTranslationContext(); - - return ( - <LoadingError - title={<i18n.Translate>Could not load</i18n.Translate>} - error={error} - /> - ); -} - export function ReadyView({ currency, error, @@ -118,14 +105,14 @@ export function ReadyView({ {error && ( <ErrorMessage - title={<i18n.Translate>Unable add this account</i18n.Translate>} + title={i18n.str`Unable add this account`} description={error} /> )} <p> <Input> <SelectList - label={<i18n.Translate>Select account type</i18n.Translate>} + label={i18n.str`Select account type`} list={accountType.list} name="accountType" value={accountType.value} diff --git a/packages/taler-wallet-webextension/src/wallet/Notifications/index.ts b/packages/taler-wallet-webextension/src/wallet/Notifications/index.ts index 4697ca549..22b3adb0f 100644 --- a/packages/taler-wallet-webextension/src/wallet/Notifications/index.ts +++ b/packages/taler-wallet-webextension/src/wallet/Notifications/index.ts @@ -15,11 +15,12 @@ */ import { UserAttentionUnreadList } from "@gnu-taler/taler-util"; +import { ErrorAlertView } from "../../components/CurrentAlerts.js"; import { Loading } from "../../components/Loading.js"; -import { HookError } from "../../hooks/useAsyncAsHook.js"; +import { ErrorAlert } from "../../context/alert.js"; import { compose, StateViewMap } from "../../utils/index.js"; import { useComponentState } from "./state.js"; -import { LoadingUriView, ReadyView } from "./views.js"; +import { ReadyView } from "./views.js"; export type Props = object; @@ -32,8 +33,8 @@ export namespace State { } export interface LoadingUriError { - status: "loading-error"; - error: HookError; + status: "error"; + error: ErrorAlert; } export interface BaseInfo { @@ -49,7 +50,7 @@ export namespace State { const viewMapping: StateViewMap<State> = { loading: Loading, - "loading-error": LoadingUriView, + error: ErrorAlertView, ready: ReadyView, }; diff --git a/packages/taler-wallet-webextension/src/wallet/Notifications/state.ts b/packages/taler-wallet-webextension/src/wallet/Notifications/state.ts index 648e490ce..0e06a1e75 100644 --- a/packages/taler-wallet-webextension/src/wallet/Notifications/state.ts +++ b/packages/taler-wallet-webextension/src/wallet/Notifications/state.ts @@ -15,12 +15,15 @@ */ import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; +import { alertFromError } from "../../context/alert.js"; import { useBackendContext } from "../../context/backend.js"; +import { useTranslationContext } from "../../context/translation.js"; import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js"; import { Props, State } from "./index.js"; export function useComponentState(p: Props): State { const api = useBackendContext(); + const { i18n } = useTranslationContext(); const hook = useAsyncAsHook(async () => { return await api.wallet.call( WalletApiOperation.GetUserAttentionRequests, @@ -34,10 +37,14 @@ export function useComponentState(p: Props): State { error: undefined, }; } + if (hook.hasError) { return { - status: "loading-error", - error: hook, + status: "error", + error: alertFromError( + i18n.str`Could not load user attention request`, + hook, + ), }; } diff --git a/packages/taler-wallet-webextension/src/wallet/Notifications/views.tsx b/packages/taler-wallet-webextension/src/wallet/Notifications/views.tsx index 9146d8837..8d0bb34c0 100644 --- a/packages/taler-wallet-webextension/src/wallet/Notifications/views.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Notifications/views.tsx @@ -20,7 +20,6 @@ import { AttentionType, } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; -import { LoadingError } from "../../components/LoadingError.js"; import { Column, DateSeparator, @@ -37,17 +36,6 @@ import { Pages } from "../../NavigationBar.js"; import { assertUnreachable } from "../../utils/index.js"; import { State } from "./index.js"; -export function LoadingUriView({ error }: State.LoadingUriError): VNode { - const { i18n } = useTranslationContext(); - - return ( - <LoadingError - title={<i18n.Translate>Could not load notifications</i18n.Translate>} - error={error} - /> - ); -} - const term = 1000 * 60 * 60 * 24; function normalizeToDay(x: number): number { return Math.round(x / term) * term; diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx index eb86c9a3f..286a2a88d 100644 --- a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx @@ -127,11 +127,7 @@ export function SetUrlView({ </Title> {error && ( <ErrorMessage - title={ - <i18n.Translate> - Could not get provider information - </i18n.Translate> - } + title={i18n.str`Could not get provider information`} description={error} /> )} @@ -223,7 +219,7 @@ export function ConfirmProviderView({ </SubTitle> <p> {Amounts.isZero(provider.annual_fee) ? ( - <i18n.Translate>free of charge</i18n.Translate> + i18n.str`free of charge` ) : ( <i18n.Translate> {provider.annual_fee} per year of service @@ -240,7 +236,7 @@ export function ConfirmProviderView({ </i18n.Translate> </p> <Checkbox - label={<i18n.Translate>Accept terms of service</i18n.Translate>} + label={i18n.str`Accept terms of service`} name="terms" onToggle={async () => setAccepted((old) => !old)} enabled={accepted} diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx index 46d54e871..9b72c0fae 100644 --- a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx @@ -23,11 +23,12 @@ import { WalletApiOperation, } from "@gnu-taler/taler-wallet-core"; import { Fragment, h, VNode } from "preact"; +import { AlertView } from "../components/CurrentAlerts.js"; import { ErrorMessage } from "../components/ErrorMessage.js"; import { Loading } from "../components/Loading.js"; -import { LoadingError } from "../components/LoadingError.js"; import { PaymentStatus, SmallLightText } from "../components/styled/index.js"; import { Time } from "../components/Time.js"; +import { alertFromError } from "../context/alert.js"; import { useBackendContext } from "../context/backend.js"; import { useTranslationContext } from "../context/translation.js"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; @@ -65,14 +66,11 @@ export function ProviderDetailPage({ } if (state.hasError) { return ( - <LoadingError - title={ - <i18n.Translate> - There was an error loading the provider detail for " - {providerURL}" - </i18n.Translate> - } - error={state} + <AlertView + alert={alertFromError( + i18n.str`There was an error loading the provider detail for "${providerURL}"`, + state, + )} /> ); } @@ -270,9 +268,7 @@ function Error({ info }: { info: ProviderInfo }): VNode { if (info.lastError) { return ( <ErrorMessage - title={ - <i18n.Translate>This provider has reported an error</i18n.Translate> - } + title={i18n.str`This provider has reported an error`} description={info.lastError.hint} /> ); @@ -282,32 +278,17 @@ function Error({ info }: { info: ProviderInfo }): VNode { case "backup-conflicting-device": return ( <ErrorMessage - title={ - <Fragment> - <i18n.Translate> - There is conflict with another backup from{" "} - <b>{info.backupProblem.otherDeviceId}</b> - </i18n.Translate> - </Fragment> - } + title={i18n.str`There is conflict with another backup from "${info.backupProblem.otherDeviceId}"`} /> ); case "backup-unreadable": - return ( - <ErrorMessage - title={<i18n.Translate>Backup is not readable</i18n.Translate>} - /> - ); + return <ErrorMessage title={i18n.str`Backup is not readable`} />; default: return ( <ErrorMessage - title={ - <Fragment> - <i18n.Translate> - Unknown backup problem: {JSON.stringify(info.backupProblem)} - </i18n.Translate> - </Fragment> - } + title={i18n.str`Unknown backup problem: ${JSON.stringify( + info.backupProblem, + )}`} /> ); } diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx index a259f7c9a..c366f014f 100644 --- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx @@ -42,8 +42,8 @@ export function ReserveCreated({ if (!paytoURI) { return ( <ErrorMessage - title={<i18n.Translate>Could not parse the payto URI</i18n.Translate>} - description={<i18n.Translate>Please check the uri</i18n.Translate>} + title={i18n.str`Could not parse the payto URI`} + description={i18n.str`Please check the uri`} /> ); } diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.tsx index 768a4ca6a..ed1bc838a 100644 --- a/packages/taler-wallet-webextension/src/wallet/Settings.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Settings.tsx @@ -111,13 +111,13 @@ export function SettingsView({ <section> {autoOpenToggle.button.error && ( <ErrorTalerOperation - title={<i18n.Translate>Could not toggle auto-open</i18n.Translate>} + title={i18n.str`Could not toggle auto-open`} error={autoOpenToggle.button.error.errorDetail} /> )} {/* {clipboardToggle.button.error && ( <ErrorTalerOperation - title={<i18n.Translate>Could not toggle clipboard</i18n.Translate>} + title={i18n.str`Could not toggle clipboard`} error={clipboardToggle.button.error.errorDetail} /> )} */} @@ -125,11 +125,7 @@ export function SettingsView({ <i18n.Translate>Navigator</i18n.Translate> </SubTitle> <Checkbox - label={ - <i18n.Translate> - Automatically open wallet based on page content - </i18n.Translate> - } + label={i18n.str`Automatically open wallet based on page content`} name="autoOpen" description={ <i18n.Translate> @@ -142,9 +138,7 @@ export function SettingsView({ /> {/* <Checkbox label={ - <i18n.Translate> - Automatically check clipboard for Taler URI - </i18n.Translate> + i18n.str`Automatically check clipboard for Taler URI` } name="clipboard" description={ @@ -241,13 +235,9 @@ export function SettingsView({ <i18n.Translate>Troubleshooting</i18n.Translate> </SubTitle> <Checkbox - label={<i18n.Translate>Developer mode</i18n.Translate>} + label={i18n.str`Developer mode`} name="devMode" - description={ - <i18n.Translate> - More options and information useful for debugging - </i18n.Translate> - } + description={i18n.str`More options and information useful for debugging`} enabled={devModeToggle.value!} onToggle={devModeToggle.button.onClick!} /> @@ -271,7 +261,7 @@ export function SettingsView({ </SubTitle> {coreVersion && ( <Part - title={<i18n.Translate>Wallet Core</i18n.Translate>} + title={i18n.str`Wallet Core`} text={ <span> {coreVersion.version}{" "} @@ -281,7 +271,7 @@ export function SettingsView({ /> )} <Part - title={<i18n.Translate>Web Extension</i18n.Translate>} + title={i18n.str`Web Extension`} text={ <span> {webexVersion.version}{" "} @@ -292,15 +282,15 @@ export function SettingsView({ {coreVersion && ( <JustInDevMode> <Part - title={<i18n.Translate>Exchange compatibility</i18n.Translate>} + title={i18n.str`Exchange compatibility`} text={<span>{coreVersion.exchange}</span>} /> <Part - title={<i18n.Translate>Merchant compatibility</i18n.Translate>} + title={i18n.str`Merchant compatibility`} text={<span>{coreVersion.merchant}</span>} /> <Part - title={<i18n.Translate>Bank compatibility</i18n.Translate>} + title={i18n.str`Bank compatibility`} text={<span>{coreVersion.bank}</span>} /> </JustInDevMode> diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx index b7eb4a947..542694490 100644 --- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx @@ -32,6 +32,7 @@ import { TransactionRefund, TransactionTip, TransactionType, + TranslatedString, WithdrawalType, } from "@gnu-taler/taler-util"; import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; @@ -43,9 +44,8 @@ import emptyImg from "../../static/img/empty.png"; import { Amount } from "../components/Amount.js"; import { BankDetailsByPaytoType } from "../components/BankDetailsByPaytoType.js"; import { CopyButton } from "../components/CopyButton.js"; -import { ErrorTalerOperation } from "../components/ErrorTalerOperation.js"; +import { AlertView, ErrorAlertView } from "../components/CurrentAlerts.js"; import { Loading } from "../components/Loading.js"; -import { LoadingError } from "../components/LoadingError.js"; import { Kind, Part, PartCollapsible, PartPayto } from "../components/Part.js"; import { QR } from "../components/QR.js"; import { ShowFullContractTermPopup } from "../components/ShowFullContractTermPopup.js"; @@ -60,6 +60,7 @@ import { WarningBox, } from "../components/styled/index.js"; import { Time } from "../components/Time.js"; +import { alertFromError } from "../context/alert.js"; import { useBackendContext } from "../context/backend.js"; import { useTranslationContext } from "../context/translation.js"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; @@ -98,13 +99,11 @@ export function TransactionPage({ if (state.hasError) { return ( - <LoadingError - title={ - <i18n.Translate> - Could not load the transaction information - </i18n.Translate> - } - error={state} + <AlertView + alert={alertFromError( + i18n.str`Could not load transaction information`, + state, + )} /> ); } @@ -199,14 +198,14 @@ export function TransactionView({ return ( <Fragment> <section style={{ padding: 8, textAlign: "center" }}> - <ErrorTalerOperation - title={ - <i18n.Translate> - There was an error trying to complete the transaction - </i18n.Translate> - } - error={transaction?.error} - /> + {transaction?.error ? ( + <ErrorAlertView + error={alertFromError( + i18n.str`There was an error trying to complete the transaction`, + transaction.error, + )} + /> + ) : undefined} {transaction.pending && ( <WarningBox> <i18n.Translate>This transaction is not completed</i18n.Translate> @@ -367,7 +366,7 @@ export function TransactionView({ </Fragment> )} <Part - title={<i18n.Translate>Details</i18n.Translate>} + title={i18n.str`Details`} text={ <WithdrawDetails amount={{ @@ -420,7 +419,7 @@ export function TransactionView({ <br /> {transaction.refunds.length > 0 ? ( <Part - title={<i18n.Translate>Refunds</i18n.Translate>} + title={i18n.str`Refunds`} text={ <table> {transaction.refunds.map((r, i) => { @@ -462,7 +461,7 @@ export function TransactionView({ picked up. </i18n.Translate> <Part - title={<i18n.Translate>Offer</i18n.Translate>} + title={i18n.str`Offer`} text={<Amount value={pendingRefund} />} kind="positive" /> @@ -480,17 +479,17 @@ export function TransactionView({ </InfoBox> )} <Part - title={<i18n.Translate>Merchant</i18n.Translate>} + title={i18n.str`Merchant`} text={<MerchantDetails merchant={transaction.info.merchant} />} kind="neutral" /> <Part - title={<i18n.Translate>Invoice ID</i18n.Translate>} - text={transaction.info.orderId} + title={i18n.str`Invoice ID`} + text={transaction.info.orderId as TranslatedString} kind="neutral" /> <Part - title={<i18n.Translate>Details</i18n.Translate>} + title={i18n.str`Details`} text={ <PurchaseDetails price={price} @@ -520,12 +519,12 @@ export function TransactionView({ </Header> {payto && <PartPayto payto={payto} kind="neutral" />} <Part - title={<i18n.Translate>Details</i18n.Translate>} + title={i18n.str`Details`} text={<DepositDetails transaction={transaction} />} kind="neutral" /> <Part - title={<i18n.Translate>Wire transfer deadline</i18n.Translate>} + title={i18n.str`Wire transfer deadline`} text={ <Time timestamp={AbsoluteTime.fromTimestamp( @@ -557,7 +556,7 @@ export function TransactionView({ {transaction.exchangeBaseUrl} </Header> <Part - title={<i18n.Translate>Details</i18n.Translate>} + title={i18n.str`Details`} text={<RefreshDetails transaction={transaction} />} /> </TransactionTemplate> @@ -578,12 +577,12 @@ export function TransactionView({ {transaction.merchantBaseUrl} </Header> {/* <Part - title={<i18n.Translate>Merchant</i18n.Translate>} + title={i18n.str`Merchant`} text={<MerchantDetails merchant={transaction.merchant} />} kind="neutral" /> */} <Part - title={<i18n.Translate>Details</i18n.Translate>} + title={i18n.str`Details`} text={<TipDetails transaction={transaction} />} /> </TransactionTemplate> @@ -604,12 +603,12 @@ export function TransactionView({ </Header> <Part - title={<i18n.Translate>Merchant</i18n.Translate>} - text={transaction.info.merchant.name} + title={i18n.str`Merchant`} + text={transaction.info.merchant.name as TranslatedString} kind="neutral" /> <Part - title={<i18n.Translate>Original order ID</i18n.Translate>} + title={i18n.str`Original order ID`} text={ <a href={Pages.balanceTransaction({ @@ -622,12 +621,12 @@ export function TransactionView({ kind="neutral" /> <Part - title={<i18n.Translate>Purchase summary</i18n.Translate>} - text={transaction.info.summary} + title={i18n.str`Purchase summary`} + text={transaction.info.summary as TranslatedString} kind="neutral" /> <Part - title={<i18n.Translate>Details</i18n.Translate>} + title={i18n.str`Details`} text={<RefundDetails transaction={transaction} />} /> </TransactionTemplate> @@ -683,25 +682,25 @@ export function TransactionView({ {transaction.info.summary ? ( <Part - title={<i18n.Translate>Subject</i18n.Translate>} - text={transaction.info.summary} + title={i18n.str`Subject`} + text={transaction.info.summary as TranslatedString} kind="neutral" /> ) : undefined} <Part - title={<i18n.Translate>Exchange</i18n.Translate>} - text={transaction.exchangeBaseUrl} + title={i18n.str`Exchange`} + text={transaction.exchangeBaseUrl as TranslatedString} kind="neutral" /> {transaction.pending /** pending is not-pay */ && ( <Part - title={<i18n.Translate>URI</i18n.Translate>} + title={i18n.str`URI`} text={<ShowQrWithCopy text={transaction.talerUri} />} kind="neutral" /> )} <Part - title={<i18n.Translate>Details</i18n.Translate>} + title={i18n.str`Details`} text={ <InvoiceDetails amount={{ @@ -730,18 +729,18 @@ export function TransactionView({ {transaction.info.summary ? ( <Part - title={<i18n.Translate>Subject</i18n.Translate>} - text={transaction.info.summary} + title={i18n.str`Subject`} + text={transaction.info.summary as TranslatedString} kind="neutral" /> ) : undefined} <Part - title={<i18n.Translate>Exchange</i18n.Translate>} - text={transaction.exchangeBaseUrl} + title={i18n.str`Exchange`} + text={transaction.exchangeBaseUrl as TranslatedString} kind="neutral" /> <Part - title={<i18n.Translate>Details</i18n.Translate>} + title={i18n.str`Details`} text={ <InvoiceDetails amount={{ @@ -769,25 +768,25 @@ export function TransactionView({ {transaction.info.summary ? ( <Part - title={<i18n.Translate>Subject</i18n.Translate>} - text={transaction.info.summary} + title={i18n.str`Subject`} + text={transaction.info.summary as TranslatedString} kind="neutral" /> ) : undefined} <Part - title={<i18n.Translate>Exchange</i18n.Translate>} - text={transaction.exchangeBaseUrl} + title={i18n.str`Exchange`} + text={transaction.exchangeBaseUrl as TranslatedString} kind="neutral" /> {/* {transaction.pending && ( //pending is not-received )} */} <Part - title={<i18n.Translate>URI</i18n.Translate>} + title={i18n.str`URI`} text={<ShowQrWithCopy text={transaction.talerUri} />} kind="neutral" /> <Part - title={<i18n.Translate>Details</i18n.Translate>} + title={i18n.str`Details`} text={ <TransferDetails amount={{ @@ -816,18 +815,18 @@ export function TransactionView({ {transaction.info.summary ? ( <Part - title={<i18n.Translate>Subject</i18n.Translate>} - text={transaction.info.summary} + title={i18n.str`Subject`} + text={transaction.info.summary as TranslatedString} kind="neutral" /> ) : undefined} <Part - title={<i18n.Translate>Exchange</i18n.Translate>} - text={transaction.exchangeBaseUrl} + title={i18n.str`Exchange`} + text={transaction.exchangeBaseUrl as TranslatedString} kind="neutral" /> <Part - title={<i18n.Translate>Details</i18n.Translate>} + title={i18n.str`Details`} text={ <TransferDetails amount={{ @@ -1245,7 +1244,7 @@ export function PurchaseDetails({ <td colSpan={2}> <PartCollapsible big - title={<i18n.Translate>Products</i18n.Translate>} + title={i18n.str`Products`} text={ <ListOfProducts> {info.products?.map((p, k) => ( @@ -1274,7 +1273,7 @@ export function PurchaseDetails({ <td colSpan={2}> <PartCollapsible big - title={<i18n.Translate>Delivery</i18n.Translate>} + title={i18n.str`Delivery`} text={ <DeliveryDetails date={info.delivery_date} @@ -1508,7 +1507,7 @@ function Header({ total: AmountJson; children: ComponentChildren; kind: Kind; - type: string; + type: TranslatedString; }): VNode { return ( <div diff --git a/packages/taler-wallet-webextension/src/wallet/Welcome.tsx b/packages/taler-wallet-webextension/src/wallet/Welcome.tsx index 0b64417b8..b243eaa1c 100644 --- a/packages/taler-wallet-webextension/src/wallet/Welcome.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Welcome.tsx @@ -91,11 +91,7 @@ export function View({ <i18n.Translate>Permissions</i18n.Translate> </SubTitle> <Checkbox - label={ - <i18n.Translate> - Automatically open wallet based on page content - </i18n.Translate> - } + label={i18n.str`Automatically open wallet based on page content`} name="perm" description={ <i18n.Translate> |