diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet/DepositPage')
3 files changed, 17 insertions, 43 deletions
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, }} |