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