fix #7152

packages/taler-wallet-webextension/package.json

@@ -69,7 +69,7 @@
     "preact-cli": "^3.3.5",
     "preact-render-to-string": "^5.1.19",
     "rimraf": "^3.0.2",
-    "typescript": "^4.8.4"
+    "typescript": "4.9.4"
   },
   "nyc": {
     "include": [

packages/taler-wallet-webextension/src/components/AmountField.stories.tsx

@@ -49,7 +49,7 @@ function RenderAmount(): VNode {
     <Fragment>
       <AmountField
         required
-        label={<i18n.Translate>Amount</i18n.Translate>}
+        label={i18n.str`Amount`}
         highestDenom={2000000}
         lowestDenom={0.01}
         handler={handler}

packages/taler-wallet-webextension/src/components/AmountField.tsx

@@ -21,6 +21,7 @@ import {
   amountMaxValue,
   Amounts,
   Result,
+  TranslatedString,
 } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
@@ -37,7 +38,7 @@ export function AmountField({
   highestDenom = 1,
   required,
 }: {
-  label: VNode;
+  label: TranslatedString;
   lowestDenom?: number;
   highestDenom?: number;
   required?: boolean;

packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx

@@ -19,6 +19,7 @@ import {
   Amounts,
   PaytoUri,
   segwitMinAmount,
+  TranslatedString,
 } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useEffect, useRef, useState } from "preact/hooks";
@@ -106,27 +107,18 @@ export function BankDetailsByPaytoType({
   }
 
   const accountPart = !payto.isKnown ? (
-    <Row
+    <Row name={i18n.str`Account`} value={payto.targetPath} />
-      name={<i18n.Translate>Account</i18n.Translate>}
-      value={payto.targetPath}
-    />
   ) : payto.targetType === "x-taler-bank" ? (
     <Fragment>
-      <Row
+      <Row name={i18n.str`Bank host`} value={payto.host} />
-        name={<i18n.Translate>Bank host</i18n.Translate>}
+      <Row name={i18n.str`Bank account`} value={payto.account} />
-        value={payto.host}
-      />
-      <Row
-        name={<i18n.Translate>Bank account</i18n.Translate>}
-        value={payto.account}
-      />
     </Fragment>
   ) : payto.targetType === "iban" ? (
     <Fragment>
       {payto.bic !== undefined ? (
-        <Row name={<i18n.Translate>BIC</i18n.Translate>} value={payto.bic} />
+        <Row name={i18n.str`BIC`} value={payto.bic} />
       ) : undefined}
-      <Row name={<i18n.Translate>IBAN</i18n.Translate>} value={payto.iban} />
+      <Row name={i18n.str`IBAN`} value={payto.iban} />
     </Fragment>
   ) : undefined;
 
@@ -146,19 +138,12 @@ export function BankDetailsByPaytoType({
       <table>
         {accountPart}
         <Row
-          name={<i18n.Translate>Amount</i18n.Translate>}
+          name={i18n.str`Amount`}
           value={<Amount value={amount} hideCurrency />}
         />
-        <Row
+        <Row name={i18n.str`Subject`} value={subject} literal />
-          name={<i18n.Translate>Subject</i18n.Translate>}
-          value={subject}
-          literal
-        />
         {receiver ? (
-          <Row
+          <Row name={i18n.str`Receiver name`} value={receiver} />
-            name={<i18n.Translate>Receiver name</i18n.Translate>}
-            value={receiver}
-          />
         ) : undefined}
       </table>
     </div>
@@ -200,7 +185,7 @@ function Row({
   value,
   literal,
 }: {
-  name: VNode;
+  name: TranslatedString;
   value: string | VNode;
   literal?: boolean;
 }): VNode {

packages/taler-wallet-webextension/src/components/Banner.tsx

@@ -13,6 +13,7 @@
  You should have received a copy of the GNU General Public License along with
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
+import { TranslatedString } from "@gnu-taler/taler-util";
 import { ComponentChildren, Fragment, h, JSX, VNode } from "preact";
 import { Button } from "../mui/Button.js";
 import { Divider } from "../mui/Divider.js";
@@ -20,7 +21,7 @@ import { Grid } from "../mui/Grid.js";
 import { Paper } from "../mui/Paper.js";
 
 interface Props extends JSX.HTMLAttributes<HTMLDivElement> {
-  titleHead?: VNode;
+  titleHead?: VNode | TranslatedString;
   children: ComponentChildren;
   // elements: {
   //   icon?: VNode;

packages/taler-wallet-webextension/src/components/Checkbox.tsx

@@ -14,14 +14,15 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
+import { TranslatedString } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 
 interface Props {
   enabled?: boolean;
   onToggle?: () => Promise<void>;
-  label: VNode;
+  label: TranslatedString;
   name: string;
-  description?: VNode;
+  description?: VNode | TranslatedString;
 }
 export function Checkbox({
   name,

packages/taler-wallet-webextension/src/components/CurrentAlerts.tsx

@@ -0,0 +1,108 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU 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.
+
+ GNU 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
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { ComponentChildren, Fragment, h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { useTranslationContext } from "../../../web-util/src/index.browser.js";
+import {
+  ErrorAlert,
+  Alert as AlertNotification,
+  useAlertContext,
+} from "../context/alert.js";
+import { Alert } from "../mui/Alert.js";
+
+/**
+ *
+ * @author sebasjm
+ */
+
+function AlertContext({
+  context,
+  cause,
+}: {
+  cause: unknown;
+  context: undefined | object;
+}): VNode {
+  const [more, setMore] = useState(false);
+  const { i18n } = useTranslationContext();
+  if (!more) {
+    return (
+      <div style={{ display: "flex", justifyContent: "right" }}>
+        <a onClick={() => setMore(true)}>
+          <i18n.Translate>more info</i18n.Translate>
+        </a>
+      </div>
+    );
+  }
+  return (
+    <pre style={{ overflow: "overlay" }}>
+      {JSON.stringify(
+        context === undefined ? { cause } : { context, cause },
+        undefined,
+        2,
+      )}
+    </pre>
+  );
+}
+
+export function ErrorAlertView({
+  error: alert,
+  onClose,
+}: {
+  error: ErrorAlert;
+  onClose?: () => Promise<void>;
+}): VNode {
+  return (
+    <Alert title={alert.message} severity={alert.type} onClose={onClose}>
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        <div>{alert.description}</div>
+        <AlertContext context={alert.context} cause={alert.cause} />
+      </div>
+    </Alert>
+  );
+}
+
+export function AlertView({
+  alert,
+  onClose,
+}: {
+  alert: AlertNotification;
+  onClose?: () => Promise<void>;
+}): VNode {
+  return (
+    <Alert title={alert.message} severity={alert.type} onClose={onClose}>
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        <div>{alert.description}</div>
+      </div>
+    </Alert>
+  );
+}
+
+export function CurrentAlerts(): VNode {
+  const { alerts, removeAlert } = useAlertContext();
+  if (alerts.length === 0) return <Fragment />;
+  return (
+    <Wrapper>
+      {alerts.map((n, i) => (
+        <AlertView key={i} alert={n} onClose={async () => removeAlert(n)} />
+      ))}
+    </Wrapper>
+  );
+}
+
+function Wrapper({ children }: { children: ComponentChildren }): VNode {
+  return <div style={{ margin: "2em" }}>{children}</div>;
+}

packages/taler-wallet-webextension/src/components/ErrorMessage.tsx

@@ -13,6 +13,7 @@
  You should have received a copy of the GNU General Public License along with
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
+import { TranslatedString } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import arrowDown from "../svg/chevron-down.svg";
@@ -22,7 +23,7 @@ export function ErrorMessage({
   title,
   description,
 }: {
-  title: VNode;
+  title: TranslatedString;
   description?: string | VNode;
 }): VNode | null {
   const [showErrorDetail, setShowErrorDetail] = useState(false);

packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx

@@ -13,7 +13,7 @@
  You should have received a copy of the GNU General Public License along with
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
-import { TalerErrorDetail } from "@gnu-taler/taler-util";
+import { TalerErrorDetail, TranslatedString } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import arrowDown from "../svg/chevron-down.svg";
@@ -24,7 +24,7 @@ export function ErrorTalerOperation({
   title,
   error,
 }: {
-  title?: VNode;
+  title?: TranslatedString;
   error?: TalerErrorDetail;
 }): VNode | null {
   const { devMode } = useDevContext();

packages/taler-wallet-webextension/src/components/Loading.tsx

@@ -13,30 +13,88 @@
  You should have received a copy of the GNU General Public License along with
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
+import { css } from "@linaria/core";
 import { Fragment, h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
 import { useTranslationContext } from "../context/translation.js";
+import ProgressIcon from "../svg/progress.svg";
 import { CenteredText } from "./styled/index.js";
 
+const fadeIn = css`
+  & {
+    animation: fadein 3s;
+  }
+  @keyframes fadein {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
+
 export function Loading(): VNode {
   const { i18n } = useTranslationContext();
-  const [tooLong, setTooLong] = useState(false);
+  return (
-  useEffect(() => {
+    <section style={{ margin: "auto" }}>
-    const id = setTimeout(() => {
+      <CenteredText class={fadeIn}>
-      setTooLong(true);
+        <i18n.Translate>Loading</i18n.Translate>...
-    }, 500);
+      </CenteredText>
-    return () => {
+      {/* <div class={ripple} style={{ "--size": "250px" }}>
-      clearTimeout(id);
+        <div></div>
-    };
+        <div></div>
-  });
+      </div> */}
-  if (tooLong) {
+      <div class={fadeIn} dangerouslySetInnerHTML={{ __html: ProgressIcon }} />
-    return (
+    </section>
-      <section style={{ margin: "auto" }}>
+  );
-        <CenteredText>
-          <i18n.Translate>Loading</i18n.Translate>...
-        </CenteredText>
-      </section>
-    );
-  }
-  return <Fragment />;
 }
+
+const ripple = css`
+  & {
+    display: inline-block;
+    position: relative;
+    width: var(--size);
+    height: var(--size);
+  }
+  & div {
+    position: absolute;
+    border: 4px solid black;
+    opacity: 1;
+    border-radius: 50%;
+    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+  }
+  & div:nth-child(2) {
+    animation-delay: -0.3s;
+  }
+  @keyframes lds-ripple {
+    0% {
+      top: calc(var(--size) / 2);
+      left: calc(var(--size) / 2);
+      width: 0;
+      height: 0;
+      opacity: 0;
+    }
+    14.9% {
+      top: calc(var(--size) / 2);
+      left: calc(var(--size) / 2);
+      width: 0;
+      height: 0;
+      opacity: 0;
+    }
+    15% {
+      top: calc(var(--size) / 2);
+      left: calc(var(--size) / 2);
+      width: 0;
+      height: 0;
+      opacity: 1;
+    }
+    100% {
+      top: 0px;
+      left: 0px;
+      width: var(--size);
+      height: var(--size);
+      opacity: 0;
+    }
+  }
+`;

packages/taler-wallet-webextension/src/components/LoadingError.tsx

@@ -1,30 +0,0 @@
-/*
- This file is part of GNU Taler
- (C) 2022 Taler Systems S.A.
-
- GNU 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.
-
- GNU 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
- GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
- */
-import { h, VNode } from "preact";
-import { HookError } from "../hooks/useAsyncAsHook.js";
-import { ErrorMessage } from "./ErrorMessage.js";
-import { ErrorTalerOperation } from "./ErrorTalerOperation.js";
-
-export interface Props {
-  title: VNode;
-  error: HookError;
-}
-export function LoadingError({ title, error }: Props): VNode {
-  if (error.operational) {
-    return <ErrorTalerOperation title={title} error={error.details} />;
-  }
-  return <ErrorMessage title={title} description={error.message} />;
-}

packages/taler-wallet-webextension/src/components/MultiActionButton.tsx

@@ -13,7 +13,7 @@
  You should have received a copy of the GNU General Public License along with
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
-import { getUnpackedSettings } from "http2";
+import { TranslatedString } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { Button } from "../mui/Button.js";
@@ -21,7 +21,7 @@ import arrowDown from "../svg/chevron-down.svg";
 import { ParagraphClickable } from "./styled/index.js";
 
 export interface Props {
-  label: (s: string) => VNode;
+  label: (s: string) => TranslatedString;
   actions: string[];
   onClick: (s: string) => Promise<void>;
 }

packages/taler-wallet-webextension/src/components/Part.tsx

@@ -14,7 +14,11 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { PaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util";
+import {
+  PaytoUri,
+  stringifyPaytoUri,
+  TranslatedString,
+} from "@gnu-taler/taler-util";
 import { styled } from "@linaria/react";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
@@ -27,8 +31,8 @@ import {
 
 export type Kind = "positive" | "negative" | "neutral";
 interface Props {
-  title: VNode | string;
+  title: VNode | TranslatedString;
-  text: VNode | string;
+  text: VNode | TranslatedString;
   kind?: Kind;
   big?: boolean;
   showSign?: boolean;

packages/taler-wallet-webextension/src/components/PaymentButtons.tsx

@@ -19,6 +19,7 @@ import {
   Amounts,
   PreparePayResult,
   PreparePayResultType,
+  TranslatedString,
 } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
@@ -109,8 +110,10 @@ export function PaymentButtons({
         <section>
           {payStatus.paid && payStatus.contractTerms.fulfillment_message && (
             <Part
-              title={<i18n.Translate>Merchant message</i18n.Translate>}
+              title={i18n.str`Merchant message`}
-              text={payStatus.contractTerms.fulfillment_message}
+              text={
+                payStatus.contractTerms.fulfillment_message as TranslatedString
+              }
               kind="neutral"
             />
           )}
@@ -131,11 +134,7 @@ function PayWithMobile({ uri }: { uri: string }): VNode {
   return (
     <section>
       <LinkSuccess upperCased onClick={() => setShowQR((qr) => !qr)}>
-        {!showQR ? (
+        {!showQR ? i18n.str`Pay with a mobile phone` : i18n.str`Hide QR`}
-          <i18n.Translate>Pay with a mobile phone</i18n.Translate>
-        ) : (
-          <i18n.Translate>Hide QR</i18n.Translate>
-        )}
       </LinkSuccess>
       {showQR && (
         <div>

packages/taler-wallet-webextension/src/components/PendingTransactions.tsx

@@ -87,7 +87,7 @@ export function PendingTransactionsView({
       }}
     >
       <Banner
-        titleHead={<i18n.Translate>PENDING OPERATIONS</i18n.Translate>}
+        titleHead={i18n.str`PENDING OPERATIONS`}
         style={{
           backgroundColor: "lightcyan",
           maxHeight: 150,

packages/taler-wallet-webextension/src/components/SelectList.tsx

@@ -14,6 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
+import { TranslatedString } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useTranslationContext } from "../context/translation.js";
 import { NiceSelect } from "./styled/index.js";
@@ -21,7 +22,7 @@ import { NiceSelect } from "./styled/index.js";
 interface Props {
   value?: string;
   onChange?: (s: string) => void;
-  label: VNode;
+  label: VNode | TranslatedString;
   list: {
     [label: string]: string;
   };

packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.stories.tsx

@@ -94,7 +94,10 @@ export const Error = createExample(ErrorView, {
   error: {
     hasError: true,
     message: "message",
-    operational: false,
+    // details: {
+    //   co
+    // },
+    type: "error",
     // details: {
     //   code: 123,
     // },

packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.tsx

@@ -22,15 +22,16 @@ import { styled } from "@linaria/react";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { Loading } from "../components/Loading.js";
-import { LoadingError } from "../components/LoadingError.js";
 import { Modal } from "../components/Modal.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 { HookError, useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
 import { ButtonHandler } from "../mui/handlers.js";
 import { compose, StateViewMap } from "../utils/index.js";
 import { Amount } from "./Amount.js";
+import { AlertView } from "./CurrentAlerts.js";
 import { Link } from "./styled/index.js";
 
 const ContractTermsTable = styled.table`
@@ -160,13 +161,12 @@ export function ErrorView({
   const { i18n } = useTranslationContext();
   return (
     <Modal title="Full detail" onClose={hideHandler}>
-      <LoadingError
+      <AlertView
-        title={
+        alert={alertFromError(
-          <i18n.Translate>
+          i18n.str`Could not load purchase proposal details`,
-            Could not load purchase proposal details
+          error,
-          </i18n.Translate>
+          { proposalId },
-        }
+        )}
-        error={error}
       />
     </Modal>
   );

packages/taler-wallet-webextension/src/components/TermsOfService/index.ts

@@ -15,14 +15,13 @@
  */
 
 import { Loading } from "../../components/Loading.js";
-import { HookError } from "../../hooks/useAsyncAsHook.js";
+import { ErrorAlert } from "../../context/alert.js";
 import { ToggleHandler } from "../../mui/handlers.js";
 import { compose, StateViewMap } from "../../utils/index.js";
+import { ErrorAlertView } from "../CurrentAlerts.js";
 import { useComponentState } from "./state.js";
 import { TermsState } from "./utils.js";
 import {
-  ErrorAcceptingView,
-  LoadingUriView,
   ShowButtonsAcceptedTosView,
   ShowButtonsNonAcceptedTosView,
   ShowTosContentView,
@@ -35,8 +34,7 @@ export interface Props {
 
 export type State =
   | State.Loading
-  | State.LoadingUriError
+  | State.Error
-  | State.ErrorAccepting
   | State.ShowButtonsAccepted
   | State.ShowButtonsNotAccepted
   | State.ShowContent;
@@ -47,14 +45,9 @@ export namespace State {
     error: undefined;
   }
 
-  export interface LoadingUriError {
+  export interface Error {
-    status: "loading-error";
+    status: "error";
-    error: HookError;
+    error: ErrorAlert;
-  }
-
-  export interface ErrorAccepting {
-    status: "error-accepting";
-    error: HookError;
   }
 
   export interface BaseInfo {
@@ -79,11 +72,10 @@ export namespace State {
 
 const viewMapping: StateViewMap<State> = {
   loading: Loading,
-  "loading-error": LoadingUriView,
+  error: ErrorAlertView,
   "show-content": ShowTosContentView,
   "show-buttons-accepted": ShowButtonsAcceptedTosView,
   "show-buttons-not-accepted": ShowButtonsNonAcceptedTosView,
-  "error-accepting": ErrorAcceptingView,
 };
 
 export const TermsOfService = compose(

packages/taler-wallet-webextension/src/components/TermsOfService/state.ts

@@ -16,7 +16,9 @@
 
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { useState } from "preact/hooks";
+import { alertFromError, useAlertContext } 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";
 import { buildTermsOfServiceState } from "./utils.js";
@@ -25,9 +27,8 @@ export function useComponentState({ exchangeUrl, onChange }: Props): State {
   const api = useBackendContext();
   const readOnly = !onChange;
   const [showContent, setShowContent] = useState<boolean>(readOnly);
-  const [errorAccepting, setErrorAccepting] = useState<Error | undefined>(
+  const { i18n } = useTranslationContext();
-    undefined,
+  const { pushAlert } = useAlertContext();
-  );
 
   /**
    * For the exchange selected, bring the status of the terms of service
@@ -54,22 +55,13 @@ export function useComponentState({ exchangeUrl, onChange }: Props): State {
   }
   if (terms.hasError) {
     return {
-      status: "loading-error",
+      status: "error",
-      error: terms,
+      error: alertFromError(
+        i18n.str`Could not load the status of the term of service`,
+        terms,
+      ),
     };
   }
-
-  if (errorAccepting) {
-    return {
-      status: "error-accepting",
-      error: {
-        hasError: true,
-        operational: false,
-        message: errorAccepting.message,
-      },
-    };
-  }
-
   const { state } = terms.response;
 
   async function onUpdate(accepted: boolean): Promise<void> {
@@ -77,13 +69,13 @@ export function useComponentState({ exchangeUrl, onChange }: Props): State {
 
     try {
       if (accepted) {
-        api.wallet.call(WalletApiOperation.SetExchangeTosAccepted, {
+        await api.wallet.call(WalletApiOperation.SetExchangeTosAccepted, {
           exchangeBaseUrl: exchangeUrl,
           etag: state.version,
         });
       } else {
         // mark as not accepted
-        api.wallet.call(WalletApiOperation.SetExchangeTosAccepted, {
+        await api.wallet.call(WalletApiOperation.SetExchangeTosAccepted, {
           exchangeBaseUrl: exchangeUrl,
           etag: undefined,
         });
@@ -91,11 +83,7 @@ export function useComponentState({ exchangeUrl, onChange }: Props): State {
       // setAccepted(accepted);
       if (!readOnly) onChange(accepted); //external update
     } catch (e) {
-      if (e instanceof Error) {
+      pushAlert(alertFromError(i18n.str`Could not accept terms of service`, e));
-        //FIXME: uncomment this and display error
-        // setErrorAccepting(e.message);
-        setErrorAccepting(e);
-      }
     }
   }
 

packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx

@@ -14,49 +14,23 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
+import { ExchangeTosStatus } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
-import { LoadingError } from "../../components/LoadingError.js";
-import { useTranslationContext } from "../../context/translation.js";
-import { TermsDocument, TermsState } from "./utils.js";
-import { State } from "./index.js";
 import { CheckboxOutlined } from "../../components/CheckboxOutlined.js";
+import { ExchangeXmlTos } from "../../components/ExchangeToS.js";
 import {
   LinkSuccess,
   TermsOfService,
   WarningBox,
   WarningText,
 } from "../../components/styled/index.js";
-import { ExchangeXmlTos } from "../../components/ExchangeToS.js";
+import { useTranslationContext } from "../../context/translation.js";
-import { ToggleHandler } from "../../mui/handlers.js";
 import { Button } from "../../mui/Button.js";
-import { ExchangeTosStatus } from "@gnu-taler/taler-util";
+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 ErrorAcceptingView({ error }: State.ErrorAccepting): VNode {
-  const { i18n } = useTranslationContext();
-
-  return (
-    <LoadingError
-      title={<i18n.Translate>Could not load</i18n.Translate>}
-      error={error}
-    />
-  );
-}
 
 export function ShowButtonsAcceptedTosView({
   termsAccepted,
   showingTermsOfService,
-  terms,
 }: State.ShowButtonsAccepted): VNode {
   const { i18n } = useTranslationContext();
   const ableToReviewTermsOfService =

packages/taler-wallet-webextension/src/components/styled/index.tsx

@@ -535,7 +535,7 @@ export const LinkDestructive = styled(Link)`
 `;
 
 export const LinkPrimary = styled(Link)`
-  color: rgb(66, 184, 221);
+  color: black;
 `;
 
 export const ButtonPrimary = styled(ButtonVariant)<{ small?: boolean }>`

packages/taler-wallet-webextension/src/context/alert.ts

@@ -0,0 +1,118 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU 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.
+
+ GNU 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
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { TranslatedString } from "@gnu-taler/taler-util";
+import { ComponentChildren, createContext, h, VNode } from "preact";
+import { useContext, useState } from "preact/hooks";
+
+export type AlertType = "info" | "warning" | "error" | "success";
+
+export interface Alert {
+  message: TranslatedString;
+  description: TranslatedString | VNode;
+  type: AlertType;
+}
+
+export interface ErrorAlert extends Alert {
+  type: "error";
+  context: object;
+  cause: any;
+}
+
+type Type = {
+  alerts: Alert[];
+  pushAlert: (n: Alert) => void;
+  removeAlert: (n: Alert) => void;
+};
+
+const initial: Type = {
+  alerts: [],
+  pushAlert: () => {
+    null;
+  },
+  removeAlert: () => {
+    null;
+  },
+};
+
+const Context = createContext<Type>(initial);
+
+type AlertWithDate = Alert & { since: Date };
+
+type Props = Partial<Type> & {
+  children: ComponentChildren;
+};
+
+export const AlertProvider = ({ children }: Props): VNode => {
+  const timeout = 3000;
+
+  const [alerts, setAlerts] = useState<AlertWithDate[]>([]);
+
+  const pushAlert = (n: Alert): void => {
+    const entry = { ...n, since: new Date() };
+    setAlerts((ns) => [...ns, entry]);
+    if (n.type !== "error") {
+      setTimeout(() => {
+        setAlerts((ns) => ns.filter((x) => x.since !== entry.since));
+      }, timeout);
+    }
+  };
+
+  const removeAlert = (alert: Alert): void => {
+    setAlerts((ns: AlertWithDate[]) => ns.filter((n) => n !== alert));
+  };
+
+  return h(Context.Provider, {
+    value: { alerts, pushAlert, removeAlert },
+    children,
+  });
+};
+
+export const useAlertContext = (): Type => useContext(Context);
+
+export function alertFromError(
+  message: TranslatedString,
+  error: unknown,
+  ...context: any[]
+): ErrorAlert {
+  let description = "" as TranslatedString;
+
+  const isObject = typeof error === "object" &&
+    error !== null;
+  const hasMessage =
+    isObject &&
+    "message" in error &&
+    typeof error.message === "string";
+
+  if (hasMessage) {
+    description = error.message as TranslatedString;
+  } else {
+    description = `Unknown error: ${String(error)}` as TranslatedString;
+  }
+
+  return {
+    type: "error",
+    message,
+    description,
+    cause: error,
+    context,
+  };
+}

packages/taler-wallet-webextension/src/cta/Deposit/index.ts

@@ -15,12 +15,13 @@
  */
 
 import { AmountJson, AmountString } 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 } 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 {
   talerDepositUri: string | undefined;
@@ -37,8 +38,8 @@ export namespace State {
     error: undefined;
   }
   export interface LoadingUriError {
-    status: "loading-uri";
+    status: "error";
-    error: HookError;
+    error: ErrorAlert;
   }
   export interface Ready {
     status: "ready";
@@ -57,7 +58,7 @@ export namespace State {
 
 const viewMapping: StateViewMap<State> = {
   loading: Loading,
-  "loading-uri": LoadingUriView,
+  error: ErrorAlertView,
   ready: ReadyView,
 };
 

packages/taler-wallet-webextension/src/cta/Deposit/state.ts

@@ -16,7 +16,9 @@
 
 import { Amounts } from "@gnu-taler/taler-util";
 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";
 
@@ -38,12 +40,16 @@ export function useComponentState({
     });
     return { deposit, uri: talerDepositUri, amount };
   });
+  const { i18n } = useTranslationContext();
 
   if (!info) return { status: "loading", error: undefined };
   if (info.hasError) {
     return {
-      status: "loading-uri",
+      status: "error",
-      error: info,
+      error: alertFromError(
+        i18n.str`Could not load the status of the term of service`,
+        info,
+      ),
     };
   }
 

packages/taler-wallet-webextension/src/cta/Deposit/test.ts

@@ -50,12 +50,12 @@ describe("Deposit CTA states", () => {
           expect(status).equals("loading");
         },
         ({ status, error }) => {
-          expect(status).equals("loading-uri");
+          expect(status).equals("error");
 
           if (!error) expect.fail();
-          if (!error.hasError) expect.fail();
+          // if (!error.hasError) expect.fail();
-          if (error.operational) expect.fail();
+          // if (error.operational) expect.fail();
-          expect(error.message).eq("ERROR_NO-URI-FOR-DEPOSIT");
+          expect(error.cause?.message).eq("ERROR_NO-URI-FOR-DEPOSIT");
         },
       ],
       TestingContext,

packages/taler-wallet-webextension/src/cta/Deposit/views.tsx

@@ -17,7 +17,6 @@
 import { Amounts } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { Amount } from "../../components/Amount.js";
-import { LoadingError } from "../../components/LoadingError.js";
 import { LogoHeader } from "../../components/LogoHeader.js";
 import { Part } from "../../components/Part.js";
 import { SubTitle, WalletAction } from "../../components/styled/index.js";
@@ -30,17 +29,6 @@ import { State } from "./index.js";
  * @author sebasjm
  */
 
-export function LoadingUriView({ error }: State.LoadingUriError): VNode {
-  const { i18n } = useTranslationContext();
-
-  return (
-    <LoadingError
-      title={<i18n.Translate>Could not load deposit status</i18n.Translate>}
-      error={error}
-    />
-  );
-}
-
 export function ReadyView(state: State.Ready): VNode {
   const { i18n } = useTranslationContext();
 
@@ -55,7 +43,7 @@ export function ReadyView(state: State.Ready): VNode {
         {Amounts.isNonZero(state.cost) && (
           <Part
             big
-            title={<i18n.Translate>Cost</i18n.Translate>}
+            title={i18n.str`Cost`}
             text={<Amount value={state.cost} />}
             kind="negative"
           />
@@ -63,14 +51,14 @@ export function ReadyView(state: State.Ready): VNode {
         {Amounts.isNonZero(state.fee) && (
           <Part
             big
-            title={<i18n.Translate>Fee</i18n.Translate>}
+            title={i18n.str`Fee`}
             text={<Amount value={state.fee} />}
             kind="negative"
           />
         )}
         <Part
           big
-          title={<i18n.Translate>To be received</i18n.Translate>}
+          title={i18n.str`To be received`}
           text={<Amount value={state.effective} />}
           kind="positive"
         />

packages/taler-wallet-webextension/src/cta/InvoiceCreate/index.ts

@@ -14,16 +14,17 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { AmountJson, TalerErrorDetail } from "@gnu-taler/taler-util";
+import { AmountJson } 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 { State as SelectExchangeState } from "../../hooks/useSelectedExchange.js";
 import { ButtonHandler, TextFieldHandler } from "../../mui/handlers.js";
 import { compose, StateViewMap } from "../../utils/index.js";
 import { ExchangeSelectionPage } from "../../wallet/ExchangeSelection/index.js";
 import { NoExchangesView } from "../../wallet/ExchangeSelection/views.js";
 import { useComponentState } from "./state.js";
-import { LoadingUriView, ReadyView } from "./views.js";
+import { ReadyView } from "./views.js";
 
 export interface Props {
   amount: string;
@@ -45,8 +46,8 @@ export namespace State {
   }
 
   export interface LoadingUriError {
-    status: "loading-uri";
+    status: "error";
-    error: HookError;
+    error: ErrorAlert;
   }
 
   export interface BaseInfo {
@@ -63,13 +64,12 @@ export namespace State {
     requestAmount: AmountJson;
     exchangeUrl: string;
     error: undefined;
-    operationError?: TalerErrorDetail;
   }
 }
 
 const viewMapping: StateViewMap<State> = {
   loading: Loading,
-  "loading-uri": LoadingUriView,
+  error: ErrorAlertView,
   "no-exchange": NoExchangesView,
   "selecting-exchange": ExchangeSelectionPage,
   ready: ReadyView,

packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts

@@ -23,7 +23,9 @@ import {
 import { TalerError, WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { isFuture, parse } from "date-fns";
 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 { useSelectedExchange } from "../../hooks/useSelectedExchange.js";
 import { RecursiveState } from "../../utils/index.js";
@@ -40,6 +42,7 @@ export function useComponentState({
   const hook = useAsyncAsHook(() =>
     api.wallet.call(WalletApiOperation.ListExchanges, {}),
   );
+  const { i18n } = useTranslationContext();
 
   if (!hook) {
     return {
@@ -49,10 +52,19 @@ export function useComponentState({
   }
   if (hook.hasError) {
     return {
-      status: "loading-uri",
+      status: "error",
-      error: hook,
+      error: alertFromError(
+        i18n.str`Could not load the status of the term of service`,
+        hook,
+      ),
     };
   }
+  // if (hook.hasError) {
+  //   return {
+  //     status: "loading-uri",
+  //     error: hook,
+  //   };
+  // }
 
   const exchangeList = hook.response.exchanges;
 
@@ -60,10 +72,6 @@ export function useComponentState({
     const [subject, setSubject] = useState<string | undefined>();
     const [timestamp, setTimestamp] = useState<string | undefined>();
 
-    const [operationError, setOperationError] = useState<
-      TalerErrorDetail | undefined
-    >(undefined);
-
     const selectedExchange = useSelectedExchange({
       currency: amount.currency,
       defaultExchange: undefined,
@@ -93,11 +101,19 @@ export function useComponentState({
         error: undefined,
       };
     }
+
     if (hook.hasError) {
       return {
-        status: "loading-uri",
+        status: "error",
-        error: hook,
+        error: alertFromError(
+          i18n.str`Could not load the status of the term of service`,
+          hook,
+        ),
       };
+      // return {
+      //   status: "loading-uri",
+      //   error: hook,
+      // };
     }
 
     const { amountEffective, amountRaw } = hook.response;
@@ -160,8 +176,8 @@ export function useComponentState({
           subject === undefined
             ? undefined
             : !subject
-            ? "Can't be empty"
+              ? "Can't be empty"
-            : undefined,
+              : undefined,
         value: subject ?? "",
         onInput: async (e) => setSubject(e),
       },
@@ -183,7 +199,6 @@ export function useComponentState({
       requestAmount,
       toBeReceived,
       error: undefined,
-      operationError,
     };
   };
 }

packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx

@@ -17,41 +17,24 @@
 import { format } from "date-fns";
 import { h, VNode } from "preact";
 import { ErrorTalerOperation } from "../../components/ErrorTalerOperation.js";
-import { LoadingError } from "../../components/LoadingError.js";
 import { LogoHeader } from "../../components/LogoHeader.js";
 import { Part } from "../../components/Part.js";
-import { QR } from "../../components/QR.js";
 import {
-  Link,
   SubTitle,
   SvgIcon,
   WalletAction,
 } from "../../components/styled/index.js";
 import { useTranslationContext } from "../../context/translation.js";
 import { Button } from "../../mui/Button.js";
-import { Grid } from "../../mui/Grid.js";
 import { TextField } from "../../mui/TextField.js";
 import editIcon from "../../svg/edit_24px.svg";
 import { ExchangeDetails, InvoiceDetails } from "../../wallet/Transaction.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({
   exchangeUrl,
   subject,
   expiration,
-  cancel,
-  operationError,
   create,
   toBeReceived,
   requestAmount,
@@ -59,7 +42,7 @@ export function ReadyView({
 }: State.Ready): VNode {
   const { i18n } = useTranslationContext();
 
-  async function oneDayExpiration() {
+  async function oneDayExpiration(): Promise<void> {
     if (expiration.onInput) {
       expiration.onInput(
         format(new Date().getTime() + 1000 * 60 * 60 * 24, "dd/MM/yyyy"),
@@ -67,14 +50,14 @@ export function ReadyView({
     }
   }
 
-  async function oneWeekExpiration() {
+  async function oneWeekExpiration(): Promise<void> {
     if (expiration.onInput) {
       expiration.onInput(
         format(new Date().getTime() + 1000 * 60 * 60 * 24 * 7, "dd/MM/yyyy"),
       );
     }
   }
-  async function _20DaysExpiration() {
+  async function _20DaysExpiration(): Promise<void> {
     if (expiration.onInput) {
       expiration.onInput(
         format(new Date().getTime() + 1000 * 60 * 60 * 24 * 20, "dd/MM/yyyy"),
@@ -87,16 +70,6 @@ export function ReadyView({
       <SubTitle>
         <i18n.Translate>Digital invoice</i18n.Translate>
       </SubTitle>
-      {operationError && (
-        <ErrorTalerOperation
-          title={
-            <i18n.Translate>
-              Could not finish the invoice creation
-            </i18n.Translate>
-          }
-          error={operationError}
-        />
-      )}
       <section style={{ textAlign: "left" }}>
         <Part
           title={
@@ -125,9 +98,7 @@ export function ReadyView({
             label="Subject"
             variant="filled"
             error={subject.error}
-            helperText={
+            helperText={i18n.str`Short description of the invoice`}
-              <i18n.Translate>Short description of the invoice</i18n.Translate>
-            }
             required
             fullWidth
             value={subject.value}
@@ -171,7 +142,7 @@ export function ReadyView({
         </p>
 
         <Part
-          title={<i18n.Translate>Details</i18n.Translate>}
+          title={i18n.str`Details`}
           text={
             <InvoiceDetails
               amount={{
@@ -187,11 +158,6 @@ export function ReadyView({
           <i18n.Translate>Create</i18n.Translate>
         </Button>
       </section>
-      <section>
-        <Link upperCased onClick={cancel.onClick}>
-          <i18n.Translate>Cancel</i18n.Translate>
-        </Link>
-      </section>
     </WalletAction>
   );
 }

packages/taler-wallet-webextension/src/cta/InvoicePay/index.ts

@@ -20,12 +20,13 @@ import {
   PreparePayResult,
   TalerErrorDetail,
 } 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 } 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 {
   talerPayPullUri: string;
@@ -48,8 +49,8 @@ export namespace State {
   }
 
   export interface LoadingUriError {
-    status: "loading-uri";
+    status: "error";
-    error: HookError;
+    error: ErrorAlert;
   }
 
   export interface BaseInfo {
@@ -83,7 +84,7 @@ export namespace State {
 
 const viewMapping: StateViewMap<State> = {
   loading: Loading,
-  "loading-uri": LoadingUriView,
+  error: ErrorAlertView,
   "no-balance-for-currency": ReadyView,
   "no-enough-balance": ReadyView,
   ready: ReadyView,

packages/taler-wallet-webextension/src/cta/InvoicePay/state.ts

@@ -25,7 +25,9 @@ import {
 } from "@gnu-taler/taler-util";
 import { TalerError, WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { useEffect, 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 hook = useAsyncAsHook(async () => {
     const p2p = await api.wallet.call(WalletApiOperation.CheckPeerPullPayment, {
       talerUri: talerPayPullUri,
@@ -63,10 +66,19 @@ export function useComponentState({
   }
   if (hook.hasError) {
     return {
-      status: "loading-uri",
+      status: "error",
-      error: hook,
+      error: alertFromError(
+        i18n.str`Could not load the status of the term of service`,
+        hook,
+      ),
     };
   }
+  // if (hook.hasError) {
+  //   return {
+  //     status: "loading-uri",
+  //     error: hook,
+  //   };
+  // }
 
   const { contractTerms, peerPullPaymentIncomingId } = hook.response.p2p;
 

packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx

@@ -17,26 +17,14 @@
 import { Fragment, h, VNode } from "preact";
 import { Amount } from "../../components/Amount.js";
 import { ErrorTalerOperation } from "../../components/ErrorTalerOperation.js";
-import { LoadingError } from "../../components/LoadingError.js";
 import { LogoHeader } from "../../components/LogoHeader.js";
 import { Part } from "../../components/Part.js";
+import { PaymentButtons } from "../../components/PaymentButtons.js";
 import { Link, SubTitle, WalletAction } from "../../components/styled/index.js";
 import { Time } from "../../components/Time.js";
 import { useTranslationContext } from "../../context/translation.js";
-import { PaymentButtons } from "../../components/PaymentButtons";
 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(
   state: State.Ready | State.NoBalanceForCurrency | State.NoEnoughBalance,
 ): VNode {
@@ -60,25 +48,15 @@ export function ReadyView(
       </SubTitle>
       {operationError && (
         <ErrorTalerOperation
-          title={
+          title={i18n.str`Could not finish the payment operation`}
-            <i18n.Translate>
-              Could not finish the payment operation
-            </i18n.Translate>
-          }
           error={operationError}
         />
       )}
       <section style={{ textAlign: "left" }}>
+        <Part title={i18n.str`Subject`} text={<div>{summary}</div>} />
+        <Part title={i18n.str`Amount`} text={<Amount value={amount} />} />
         <Part
-          title={<i18n.Translate>Subject</i18n.Translate>}
+          title={i18n.str`Valid until`}
-          text={<div>{summary}</div>}
-        />
-        <Part
-          title={<i18n.Translate>Amount</i18n.Translate>}
-          text={<Amount value={amount} />}
-        />
-        <Part
-          title={<i18n.Translate>Valid until</i18n.Translate>}
           text={<Time timestamp={expiration} format="dd MMMM yyyy, HH:mm" />}
           kind="neutral"
         />
@@ -91,11 +69,6 @@ export function ReadyView(
         payHandler={status === "ready" ? state.accept : undefined}
         goToWalletManualWithdraw={state.goToWalletManualWithdraw}
       />
-      <section>
-        <Link upperCased onClick={cancel.onClick}>
-          <i18n.Translate>Cancel</i18n.Translate>
-        </Link>
-      </section>
     </WalletAction>
   );
 }

packages/taler-wallet-webextension/src/cta/Payment/index.ts

@@ -21,12 +21,13 @@ import {
   PreparePayResultInsufficientBalance,
   PreparePayResultPaymentPossible,
 } 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 } from "../../mui/handlers.js";
 import { compose, StateViewMap } from "../../utils/index.js";
 import { useComponentState } from "./state.js";
-import { BaseView, LoadingUriView } from "./views.js";
+import { BaseView } from "./views.js";
 
 export interface Props {
   talerPayUri?: string;
@@ -49,8 +50,8 @@ export namespace State {
     error: undefined;
   }
   export interface LoadingUriError {
-    status: "loading-uri";
+    status: "error";
-    error: HookError;
+    error: ErrorAlert;
   }
 
   interface BaseInfo {
@@ -86,7 +87,7 @@ export namespace State {
 
 const viewMapping: StateViewMap<State> = {
   loading: Loading,
-  "loading-uri": LoadingUriView,
+  error: ErrorAlertView,
   "no-balance-for-currency": BaseView,
   "no-enough-balance": BaseView,
   confirmed: BaseView,

packages/taler-wallet-webextension/src/cta/Payment/state.ts

@@ -23,7 +23,9 @@ import {
 } from "@gnu-taler/taler-util";
 import { TalerError, WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { useEffect, 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 { ButtonHandler } from "../../mui/handlers.js";
 import { Props, State } from "./index.js";
@@ -36,6 +38,7 @@ export function useComponentState({
 }: Props): State {
   const [payErrMsg, setPayErrMsg] = useState<TalerError | undefined>(undefined);
   const api = useBackendContext();
+  const { i18n } = useTranslationContext();
 
   const hook = useAsyncAsHook(async () => {
     if (!talerPayUri) throw Error("ERROR_NO-URI-FOR-PAYMENT");
@@ -80,10 +83,19 @@ export function useComponentState({
   if (!hook) return { status: "loading", error: undefined };
   if (hook.hasError) {
     return {
-      status: "loading-uri",
+      status: "error",
-      error: hook,
+      error: alertFromError(
+        i18n.str`Could not load the status of the term of service`,
+        hook,
+      ),
     };
   }
+  // if (hook.hasError) {
+  //   return {
+  //     status: "loading-uri",
+  //     error: hook,
+  //   };
+  // }
   const { payStatus } = hook.response;
 
   const amount = Amounts.parseOrThrow(payStatus.amountRaw);

packages/taler-wallet-webextension/src/cta/Payment/test.ts

@@ -54,10 +54,10 @@ describe("Payment CTA states", () => {
           expect(error).undefined;
         },
         ({ status, error }) => {
-          expect(status).equals("loading-uri");
+          expect(status).equals("error");
           if (error === undefined) expect.fail();
-          expect(error.hasError).true;
+          // expect(error.hasError).true;
-          expect(error.operational).false;
+          // expect(error.operational).false;
         },
       ],
       TestingContext,

packages/taler-wallet-webextension/src/cta/Payment/views.tsx

@@ -19,28 +19,17 @@ import {
   Amounts,
   MerchantContractTerms as ContractTerms,
   PreparePayResultType,
+  TranslatedString,
 } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
-import { LoadingError } from "../../components/LoadingError.js";
 import { Part } from "../../components/Part.js";
 import { PaymentButtons } from "../../components/PaymentButtons.js";
-import { Link, SuccessBox, WarningBox } from "../../components/styled/index.js";
+import { SuccessBox, WarningBox } from "../../components/styled/index.js";
 import { Time } from "../../components/Time.js";
 import { useTranslationContext } from "../../context/translation.js";
 import { MerchantDetails, PurchaseDetails } from "../../wallet/Transaction.js";
 import { State } from "./index.js";
 
-export function LoadingUriView({ error }: State.LoadingUriError): VNode {
-  const { i18n } = useTranslationContext();
-
-  return (
-    <LoadingError
-      title={<i18n.Translate>Could not load pay status</i18n.Translate>}
-      error={error}
-    />
-  );
-}
-
 type SupportedStates =
   | State.Ready
   | State.Confirmed
@@ -66,17 +55,17 @@ export function BaseView(state: SupportedStates): VNode {
 
       <section style={{ textAlign: "left" }}>
         <Part
-          title={<i18n.Translate>Purchase</i18n.Translate>}
+          title={i18n.str`Purchase`}
-          text={contractTerms.summary}
+          text={contractTerms.summary as TranslatedString}
           kind="neutral"
         />
         <Part
-          title={<i18n.Translate>Merchant</i18n.Translate>}
+          title={i18n.str`Merchant`}
           text={<MerchantDetails merchant={contractTerms.merchant} />}
           kind="neutral"
         />
         <Part
-          title={<i18n.Translate>Details</i18n.Translate>}
+          title={i18n.str`Details`}
           text={
             <PurchaseDetails
               price={price}
@@ -93,14 +82,14 @@ export function BaseView(state: SupportedStates): VNode {
         />
         {contractTerms.order_id && (
           <Part
-            title={<i18n.Translate>Receipt</i18n.Translate>}
+            title={i18n.str`Receipt`}
-            text={`#${contractTerms.order_id}`}
+            text={`#${contractTerms.order_id}` as TranslatedString}
             kind="neutral"
           />
         )}
         {contractTerms.pay_deadline && (
           <Part
-            title={<i18n.Translate>Valid until</i18n.Translate>}
+            title={i18n.str`Valid until`}
             text={
               <Time
                 timestamp={AbsoluteTime.fromTimestamp(
@@ -121,11 +110,6 @@ export function BaseView(state: SupportedStates): VNode {
         payHandler={state.status === "ready" ? state.payHandler : undefined}
         goToWalletManualWithdraw={state.goToWalletManualWithdraw}
       />
-      <section>
-        <Link upperCased onClick={state.cancel}>
-          <i18n.Translate>Cancel</i18n.Translate>
-        </Link>
-      </section>
     </Fragment>
   );
 }

packages/taler-wallet-webextension/src/cta/Recovery/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 { ButtonHandler } 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 {
   talerRecoveryUri?: string;
@@ -36,8 +37,8 @@ export namespace State {
   }
 
   export interface LoadingUriError {
-    status: "loading-uri";
+    status: "error";
-    error: HookError;
+    error: ErrorAlert;
   }
 
   export interface BaseInfo {
@@ -53,7 +54,7 @@ export namespace State {
 
 const viewMapping: StateViewMap<State> = {
   loading: Loading,
-  "loading-uri": LoadingUriView,
+  error: ErrorAlertView,
   ready: ReadyView,
 };
 

packages/taler-wallet-webextension/src/cta/Recovery/state.ts

@@ -16,7 +16,9 @@
 
 import { parseRecoveryUri } from "@gnu-taler/taler-util";
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
+import { Alert } from "../../context/alert.js";
 import { useBackendContext } from "../../context/backend.js";
+import { useTranslationContext } from "../../context/translation.js";
 import { Props, State } from "./index.js";
 
 export function useComponentState({
@@ -25,13 +27,16 @@ export function useComponentState({
   onSuccess,
 }: Props): State {
   const api = useBackendContext();
+  const { i18n } = useTranslationContext();
   if (!talerRecoveryUri) {
     return {
-      status: "loading-uri",
+      status: "error",
       error: {
-        operational: false,
+        type: "error",
-        hasError: true,
+        message: i18n.str`Missing URI`,
-        message: "Missing URI",
+        description: i18n.str``,
+        cause: new Error("something"),
+        context: {},
       },
     };
   }
@@ -39,11 +44,13 @@ export function useComponentState({
 
   if (!info) {
     return {
-      status: "loading-uri",
+      status: "error",
       error: {
-        operational: false,
+        type: "error",
-        hasError: true,
+        message: i18n.str`Could not parse the recovery URI`,
-        message: "Could not be read",
+        description: i18n.str``,
+        cause: new Error("something"),
+        context: {},
       },
     };
   }

packages/taler-wallet-webextension/src/cta/Recovery/views.tsx

@@ -15,28 +15,12 @@
  */
 
 import { Fragment, h, VNode } from "preact";
-import { LoadingError } from "../../components/LoadingError.js";
 import { LogoHeader } from "../../components/LogoHeader.js";
 import { SubTitle, WalletAction } from "../../components/styled/index.js";
 import { useTranslationContext } from "../../context/translation.js";
 import { Button } from "../../mui/Button.js";
 import { State } from "./index.js";
 
-export function LoadingUriView({ error }: State.LoadingUriError): VNode {
-  const { i18n } = useTranslationContext();
-
-  return (
-    <LoadingError
-      title={
-        <i18n.Translate>
-          Could not load backup recovery information
-        </i18n.Translate>
-      }
-      error={error}
-    />
-  );
-}
-
 export function ReadyView({ accept, cancel }: State.Ready): VNode {
   const { i18n } = useTranslationContext();
   return (

packages/taler-wallet-webextension/src/cta/Refund/index.ts

@@ -15,17 +15,13 @@
  */
 
 import { AmountJson, Product } 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 } from "../../mui/handlers.js";
 import { compose, StateViewMap } from "../../utils/index.js";
 import { useComponentState } from "./state.js";
-import {
+import { IgnoredView, InProgressView, ReadyView } from "./views.js";
-  IgnoredView,
-  InProgressView,
-  LoadingUriView,
-  ReadyView,
-} from "./views.js";
 
 export interface Props {
   talerRefundUri?: string;
@@ -47,8 +43,8 @@ export namespace State {
   }
 
   export interface LoadingUriError {
-    status: "loading-uri";
+    status: "error";
-    error: HookError;
+    error: ErrorAlert;
   }
 
   interface BaseInfo {
@@ -81,7 +77,7 @@ export namespace State {
 
 const viewMapping: StateViewMap<State> = {
   loading: Loading,
-  "loading-uri": LoadingUriView,
+  error: ErrorAlertView,
   "in-progress": InProgressView,
   ignored: IgnoredView,
   ready: ReadyView,

packages/taler-wallet-webextension/src/cta/Refund/state.ts

@@ -17,7 +17,9 @@
 import { Amounts, NotificationType } from "@gnu-taler/taler-util";
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { useEffect, 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";
 
@@ -27,6 +29,7 @@ export function useComponentState({
   onSuccess,
 }: Props): State {
   const api = useBackendContext();
+  const { i18n } = useTranslationContext();
   const [ignored, setIgnored] = useState(false);
 
   const info = useAsyncAsHook(async () => {
@@ -49,10 +52,19 @@ export function useComponentState({
   }
   if (info.hasError) {
     return {
-      status: "loading-uri",
+      status: "error",
-      error: info,
+      error: alertFromError(
+        i18n.str`Could not load the status of the term of service`,
+        info,
+      ),
     };
   }
+  // if (info.hasError) {
+  //   return {
+  //     status: "loading-uri",
+  //     error: info,
+  //   };
+  // }
 
   const { refund, uri } = info.response;
 

packages/taler-wallet-webextension/src/cta/Refund/test.ts

@@ -53,11 +53,11 @@ describe("Refund CTA states", () => {
           expect(error).undefined;
         },
         ({ status, error }) => {
-          expect(status).equals("loading-uri");
+          expect(status).equals("error");
           if (!error) expect.fail();
-          if (!error.hasError) expect.fail();
+          // if (!error.hasError) expect.fail();
-          if (error.operational) expect.fail();
+          // if (error.operational) expect.fail();
-          expect(error.message).eq("ERROR_NO-URI-FOR-REFUND");
+          expect(error.cause?.message).eq("ERROR_NO-URI-FOR-REFUND");
         },
       ],
       TestingContext,

packages/taler-wallet-webextension/src/cta/Refund/views.tsx

@@ -17,26 +17,14 @@
 import { Amounts } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { Amount } from "../../components/Amount.js";
-import { LoadingError } from "../../components/LoadingError.js";
 import { LogoHeader } from "../../components/LogoHeader.js";
 import { Part } from "../../components/Part.js";
+import { ProductList } from "../../components/ProductList.js";
 import { Link, SubTitle, WalletAction } from "../../components/styled/index.js";
 import { useTranslationContext } from "../../context/translation.js";
 import { Button } from "../../mui/Button.js";
-import { ProductList } from "../../components/ProductList.js";
 import { State } from "./index.js";
 
-export function LoadingUriView({ error }: State.LoadingUriError): VNode {
-  const { i18n } = useTranslationContext();
-
-  return (
-    <LoadingError
-      title={<i18n.Translate>Could not load refund status</i18n.Translate>}
-      error={error}
-    />
-  );
-}
-
 export function IgnoredView(state: State.Ignored): VNode {
   const { i18n } = useTranslationContext();
 
@@ -73,13 +61,13 @@ export function InProgressView(state: State.InProgress): VNode {
       <section>
         <Part
           big
-          title={<i18n.Translate>Total to refund</i18n.Translate>}
+          title={i18n.str`Total to refund`}
           text={<Amount value={state.awaitingAmount} />}
           kind="negative"
         />
         <Part
           big
-          title={<i18n.Translate>Refunded</i18n.Translate>}
+          title={i18n.str`Refunded`}
           text={<Amount value={state.amount} />}
           kind="negative"
         />
@@ -112,21 +100,21 @@ export function ReadyView(state: State.Ready): VNode {
       <section>
         <Part
           big
-          title={<i18n.Translate>Order amount</i18n.Translate>}
+          title={i18n.str`Order amount`}
           text={<Amount value={state.amount} />}
           kind="neutral"
         />
         {Amounts.isNonZero(state.granted) && (
           <Part
             big
-            title={<i18n.Translate>Already refunded</i18n.Translate>}
+            title={i18n.str`Already refunded`}
             text={<Amount value={state.granted} />}
             kind="neutral"
           />
         )}
         <Part
           big
-          title={<i18n.Translate>Refund offered</i18n.Translate>}
+          title={i18n.str`Refund offered`}
           text={<Amount value={state.awaitingAmount} />}
           kind="positive"
         />
@@ -147,11 +135,6 @@ export function ReadyView(state: State.Ready): VNode {
           </i18n.Translate>
         </Button>
       </section>
-      <section>
-        <Link upperCased onClick={state.cancel}>
-          <i18n.Translate>Cancel</i18n.Translate>
-        </Link>
-      </section>
     </WalletAction>
   );
 }

packages/taler-wallet-webextension/src/cta/Tip/index.ts

@@ -15,17 +15,13 @@
  */
 
 import { AmountJson } 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 } from "../../mui/handlers.js";
 import { compose, StateViewMap } from "../../utils/index.js";
 import { useComponentState } from "./state.js";
-import {
+import { AcceptedView, IgnoredView, ReadyView } from "./views.js";
-  AcceptedView,
-  IgnoredView,
-  LoadingUriView,
-  ReadyView,
-} from "./views.js";
 
 export interface Props {
   talerTipUri?: string;
@@ -48,8 +44,8 @@ export namespace State {
   }
 
   export interface LoadingUriError {
-    status: "loading-uri";
+    status: "error";
-    error: HookError;
+    error: ErrorAlert;
   }
 
   export interface BaseInfo {
@@ -75,7 +71,7 @@ export namespace State {
 
 const viewMapping: StateViewMap<State> = {
   loading: Loading,
-  "loading-uri": LoadingUriView,
+  error: ErrorAlertView,
   accepted: AcceptedView,
   ignored: IgnoredView,
   ready: ReadyView,

packages/taler-wallet-webextension/src/cta/Tip/state.ts

@@ -16,7 +16,9 @@
 
 import { Amounts } from "@gnu-taler/taler-util";
 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";
 
@@ -26,6 +28,7 @@ export function useComponentState({
   onSuccess,
 }: Props): State {
   const api = useBackendContext();
+  const { i18n } = useTranslationContext();
   const tipInfo = useAsyncAsHook(async () => {
     if (!talerTipUri) throw Error("ERROR_NO-URI-FOR-TIP");
     const tip = await api.wallet.call(WalletApiOperation.PrepareTip, {
@@ -42,10 +45,19 @@ export function useComponentState({
   }
   if (tipInfo.hasError) {
     return {
-      status: "loading-uri",
+      status: "error",
-      error: tipInfo,
+      error: alertFromError(
+        i18n.str`Could not load the status of the term of service`,
+        tipInfo,
+      ),
     };
   }
+  // if (tipInfo.hasError) {
+  //   return {
+  //     status: "loading-uri",
+  //     error: tipInfo,
+  //   };
+  // }
 
   const { tip } = tipInfo.response;
 

packages/taler-wallet-webextension/src/cta/Tip/test.ts

@@ -23,8 +23,7 @@ import { Amounts } from "@gnu-taler/taler-util";
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { expect } from "chai";
 import { tests } from "../../../../web-util/src/index.browser.js";
-import { mountHook, nullFunction } from "../../test-utils.js";
+import { createWalletApiMock, nullFunction } from "../../test-utils.js";
-import { createWalletApiMock } from "../../test-utils.js";
 import { Props } from "./index.js";
 import { useComponentState } from "./state.js";
 
@@ -47,11 +46,9 @@ describe("Tip CTA states", () => {
           expect(error).undefined;
         },
         ({ status, error }) => {
-          expect(status).equals("loading-uri");
+          expect(status).equals("error");
           if (!error) expect.fail();
-          if (!error.hasError) expect.fail();
+          expect(error.cause?.message).eq("ERROR_NO-URI-FOR-TIP");
-          if (error.operational) expect.fail();
-          expect(error.message).eq("ERROR_NO-URI-FOR-TIP");
         },
       ],
       TestingContext,

packages/taler-wallet-webextension/src/cta/Tip/views.tsx

@@ -14,9 +14,9 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
+import { TranslatedString } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { Amount } from "../../components/Amount.js";
-import { LoadingError } from "../../components/LoadingError.js";
 import { LogoHeader } from "../../components/LogoHeader.js";
 import { Part } from "../../components/Part.js";
 import { Link, SubTitle, WalletAction } from "../../components/styled/index.js";
@@ -24,17 +24,6 @@ import { useTranslationContext } from "../../context/translation.js";
 import { Button } from "../../mui/Button.js";
 import { State } from "./index.js";
 
-export function LoadingUriView({ error }: State.LoadingUriError): VNode {
-  const { i18n } = useTranslationContext();
-
-  return (
-    <LoadingError
-      title={<i18n.Translate>Could not load tip status</i18n.Translate>}
-      error={error}
-    />
-  );
-}
-
 export function IgnoredView(state: State.Ignored): VNode {
   const { i18n } = useTranslationContext();
   return (
@@ -66,18 +55,18 @@ export function ReadyView(state: State.Ready): VNode {
           <i18n.Translate>The merchant is offering you a tip</i18n.Translate>
         </p>
         <Part
-          title={<i18n.Translate>Amount</i18n.Translate>}
+          title={i18n.str`Amount`}
           text={<Amount value={state.amount} />}
           kind="positive"
         />
         <Part
-          title={<i18n.Translate>Merchant URL</i18n.Translate>}
+          title={i18n.str`Merchant URL`}
-          text={state.merchantBaseUrl}
+          text={state.merchantBaseUrl as TranslatedString}
           kind="neutral"
         />
         <Part
-          title={<i18n.Translate>Exchange</i18n.Translate>}
+          title={i18n.str`Exchange`}
-          text={state.exchangeBaseUrl}
+          text={state.exchangeBaseUrl as TranslatedString}
           kind="neutral"
         />
       </section>
@@ -92,11 +81,6 @@ export function ReadyView(state: State.Ready): VNode {
           </i18n.Translate>
         </Button>
       </section>
-      <section>
-        <Link upperCased onClick={state.cancel.onClick}>
-          <i18n.Translate>Cancel</i18n.Translate>
-        </Link>
-      </section>
     </WalletAction>
   );
 }

packages/taler-wallet-webextension/src/cta/TransferCreate/index.ts

@@ -15,12 +15,13 @@
  */
 
 import { AmountJson, TalerErrorDetail } 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, TextFieldHandler } 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 {
   amount: string;
@@ -37,8 +38,8 @@ export namespace State {
   }
 
   export interface LoadingUriError {
-    status: "loading-uri";
+    status: "error";
-    error: HookError;
+    error: ErrorAlert;
   }
 
   export interface BaseInfo {
@@ -59,7 +60,7 @@ export namespace State {
 
 const viewMapping: StateViewMap<State> = {
   loading: Loading,
-  "loading-uri": LoadingUriView,
+  error: ErrorAlertView,
   ready: ReadyView,
 };
 

packages/taler-wallet-webextension/src/cta/TransferCreate/state.ts

@@ -22,7 +22,9 @@ import {
 import { TalerError, WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { isFuture, parse } from "date-fns";
 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";
 
@@ -33,6 +35,7 @@ export function useComponentState({
 }: Props): State {
   const api = useBackendContext();
   const amount = Amounts.parseOrThrow(amountStr);
+  const { i18n } = useTranslationContext();
 
   const [subject, setSubject] = useState<string | undefined>();
   const [timestamp, setTimestamp] = useState<string | undefined>();
@@ -59,10 +62,19 @@ export function useComponentState({
   }
   if (hook.hasError) {
     return {
-      status: "loading-uri",
+      status: "error",
-      error: hook,
+      error: alertFromError(
+        i18n.str`Could not load the status of the term of service`,
+        hook,
+      ),
     };
   }
+  // if (hook.hasError) {
+  //   return {
+  //     status: "loading-uri",
+  //     error: hook,
+  //   };
+  // }
 
   const { amountEffective, amountRaw } = hook.response;
   const debitAmount = Amounts.parseOrThrow(amountRaw);

packages/taler-wallet-webextension/src/cta/TransferCreate/views.tsx

@@ -17,10 +17,8 @@
 import { format } from "date-fns";
 import { h, VNode } from "preact";
 import { ErrorTalerOperation } from "../../components/ErrorTalerOperation.js";
-import { LoadingError } from "../../components/LoadingError.js";
 import { LogoHeader } from "../../components/LogoHeader.js";
 import { Part } from "../../components/Part.js";
-import { QR } from "../../components/QR.js";
 import { Link, SubTitle, WalletAction } from "../../components/styled/index.js";
 import { useTranslationContext } from "../../context/translation.js";
 import { Button } from "../../mui/Button.js";
@@ -28,17 +26,6 @@ import { TextField } from "../../mui/TextField.js";
 import { TransferDetails } from "../../wallet/Transaction.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({
   subject,
   expiration,
@@ -80,11 +67,7 @@ export function ReadyView({
       </SubTitle>
       {operationError && (
         <ErrorTalerOperation
-          title={
+          title={i18n.str`Could not finish the transfer creation`}
-            <i18n.Translate>
-              Could not finish the transfer creation
-            </i18n.Translate>
-          }
           error={operationError}
         />
       )}
@@ -93,9 +76,7 @@ export function ReadyView({
           <TextField
             label="Subject"
             variant="filled"
-            helperText={
+            helperText={i18n.str`Short description of the transfer`}
-              <i18n.Translate>Short description of the transfer</i18n.Translate>
-            }
             error={subject.error}
             required
             fullWidth
@@ -138,7 +119,7 @@ export function ReadyView({
           </p>
         </p>
         <Part
-          title={<i18n.Translate>Details</i18n.Translate>}
+          title={i18n.str`Details`}
           text={
             <TransferDetails
               amount={{
@@ -154,13 +135,6 @@ export function ReadyView({
           <i18n.Translate>Create</i18n.Translate>
         </Button>
       </section>
-      <section>
-        <section>
-          <Link upperCased onClick={cancel.onClick}>
-            <i18n.Translate>Cancel</i18n.Translate>
-          </Link>
-        </section>
-      </section>
     </WalletAction>
   );
 }

packages/taler-wallet-webextension/src/cta/TransferPickup/index.ts

@@ -19,12 +19,13 @@ import {
   AmountJson,
   TalerErrorDetail,
 } 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 } 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 {
   talerPayPushUri: string;
@@ -41,8 +42,8 @@ export namespace State {
   }
 
   export interface LoadingUriError {
-    status: "loading-uri";
+    status: "error";
-    error: HookError;
+    error: ErrorAlert;
   }
 
   export interface BaseInfo {
@@ -62,7 +63,7 @@ export namespace State {
 
 const viewMapping: StateViewMap<State> = {
   loading: Loading,
-  "loading-uri": LoadingUriView,
+  error: ErrorAlertView,
   ready: ReadyView,
 };
 

packages/taler-wallet-webextension/src/cta/TransferPickup/state.ts

@@ -22,7 +22,9 @@ import {
 } from "@gnu-taler/taler-util";
 import { TalerError, 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";
 
@@ -32,6 +34,7 @@ export function useComponentState({
   onSuccess,
 }: Props): State {
   const api = useBackendContext();
+  const { i18n } = useTranslationContext();
   const hook = useAsyncAsHook(async () => {
     return await api.wallet.call(WalletApiOperation.CheckPeerPushPayment, {
       talerUri: talerPayPushUri,
@@ -49,10 +52,19 @@ export function useComponentState({
   }
   if (hook.hasError) {
     return {
-      status: "loading-uri",
+      status: "error",
-      error: hook,
+      error: alertFromError(
+        i18n.str`Could not load the status of the term of service`,
+        hook,
+      ),
     };
   }
+  // if (hook.hasError) {
+  //   return {
+  //     status: "loading-uri",
+  //     error: hook,
+  //   };
+  // }
 
   const { contractTerms, peerPushPaymentIncomingId } = hook.response;
 

packages/taler-wallet-webextension/src/cta/TransferPickup/views.tsx

@@ -17,7 +17,6 @@
 import { h, VNode } from "preact";
 import { Amount } from "../../components/Amount.js";
 import { ErrorTalerOperation } from "../../components/ErrorTalerOperation.js";
-import { LoadingError } from "../../components/LoadingError.js";
 import { LogoHeader } from "../../components/LogoHeader.js";
 import { Part } from "../../components/Part.js";
 import { Link, SubTitle, WalletAction } from "../../components/styled/index.js";
@@ -26,17 +25,6 @@ import { useTranslationContext } from "../../context/translation.js";
 import { Button } from "../../mui/Button.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({
   accept,
   summary,
@@ -54,25 +42,15 @@ export function ReadyView({
       </SubTitle>
       {operationError && (
         <ErrorTalerOperation
-          title={
+          title={i18n.str`Could not finish the pickup operation`}
-            <i18n.Translate>
-              Could not finish the pickup operation
-            </i18n.Translate>
-          }
           error={operationError}
         />
       )}
       <section style={{ textAlign: "left" }}>
+        <Part title={i18n.str`Subject`} text={<div>{summary}</div>} />
+        <Part title={i18n.str`Amount`} text={<Amount value={amount} />} />
         <Part
-          title={<i18n.Translate>Subject</i18n.Translate>}
+          title={i18n.str`Valid until`}
-          text={<div>{summary}</div>}
-        />
-        <Part
-          title={<i18n.Translate>Amount</i18n.Translate>}
-          text={<Amount value={amount} />}
-        />
-        <Part
-          title={<i18n.Translate>Valid until</i18n.Translate>}
           text={<Time timestamp={expiration} format="dd MMMM yyyy, HH:mm" />}
           kind="neutral"
         />
@@ -84,11 +62,6 @@ export function ReadyView({
           </i18n.Translate>
         </Button>
       </section>
-      <section>
-        <Link upperCased onClick={cancel.onClick}>
-          <i18n.Translate>Cancel</i18n.Translate>
-        </Link>
-      </section>
     </WalletAction>
   );
 }

packages/taler-wallet-webextension/src/cta/Withdraw/index.ts

@@ -27,7 +27,9 @@ import {
 
 import { ExchangeSelectionPage } from "../../wallet/ExchangeSelection/index.js";
 import { NoExchangesView } from "../../wallet/ExchangeSelection/views.js";
-import { LoadingInfoView, LoadingUriView, SuccessView } from "./views.js";
+import { SuccessView } from "./views.js";
+import { ErrorAlert } from "../../context/alert.js";
+import { ErrorAlertView } from "../../components/CurrentAlerts.js";
 
 export interface PropsFromURI {
   talerWithdrawUri: string | undefined;
@@ -44,7 +46,6 @@ export interface PropsFromParams {
 export type State =
   | State.Loading
   | State.LoadingUriError
-  | State.LoadingInfoError
   | SelectExchangeState.NoExchange
   | SelectExchangeState.Selecting
   | State.Success;
@@ -55,12 +56,8 @@ export namespace State {
     error: undefined;
   }
   export interface LoadingUriError {
-    status: "uri-error";
+    status: "error";
-    error: HookError;
+    error: ErrorAlert;
-  }
-  export interface LoadingInfoError {
-    status: "amount-error";
-    error: HookError;
   }
 
   export type Success = {
@@ -86,8 +83,7 @@ export namespace State {
 
 const viewMapping: StateViewMap<State> = {
   loading: Loading,
-  "uri-error": LoadingUriView,
+  error: ErrorAlertView,
-  "amount-error": LoadingInfoView,
   "no-exchange": NoExchangesView,
   "selecting-exchange": ExchangeSelectionPage,
   success: SuccessView,

packages/taler-wallet-webextension/src/cta/Withdraw/state.ts

@@ -23,7 +23,9 @@ import {
 } from "@gnu-taler/taler-util";
 import { TalerError, 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 { useSelectedExchange } from "../../hooks/useSelectedExchange.js";
 import { RecursiveState } from "../../utils/index.js";
@@ -35,6 +37,7 @@ export function useComponentStateFromParams({
   onSuccess,
 }: PropsFromParams): RecursiveState<State> {
   const api = useBackendContext();
+  const { i18n } = useTranslationContext();
   const uriInfoHook = useAsyncAsHook(async () => {
     const exchanges = await api.wallet.call(
       WalletApiOperation.ListExchanges,
@@ -47,8 +50,11 @@ export function useComponentStateFromParams({
 
   if (uriInfoHook.hasError) {
     return {
-      status: "uri-error",
+      status: "error",
-      error: uriInfoHook,
+      error: alertFromError(
+        i18n.str`Could not load the list of exchanges`,
+        uriInfoHook,
+      ),
     };
   }
 
@@ -95,6 +101,7 @@ export function useComponentStateFromURI({
   onSuccess,
 }: PropsFromURI): RecursiveState<State> {
   const api = useBackendContext();
+  const { i18n } = useTranslationContext();
   /**
    * Ask the wallet about the withdraw URI
    */
@@ -123,8 +130,11 @@ export function useComponentStateFromURI({
 
   if (uriInfoHook.hasError) {
     return {
-      status: "uri-error",
+      status: "error",
-      error: uriInfoHook,
+      error: alertFromError(
+        i18n.str`Could not load info from URI`,
+        uriInfoHook,
+      ),
     };
   }
 
@@ -194,6 +204,7 @@ function exchangeSelectionState(
   }
 
   return () => {
+    const { i18n } = useTranslationContext();
     const [ageRestricted, setAgeRestricted] = useState(0);
     const currentExchange = selectedExchange.selected;
     const tosNeedToBeAccepted =
@@ -255,8 +266,11 @@ function exchangeSelectionState(
     }
     if (amountHook.hasError) {
       return {
-        status: "amount-error",
+        status: "error",
-        error: amountHook,
+        error: alertFromError(
+          i18n.str`Could not load the withdrawal details`,
+          amountHook,
+        ),
       };
     }
     if (!amountHook.response) {

packages/taler-wallet-webextension/src/cta/Withdraw/test.ts

@@ -84,11 +84,11 @@ describe("Withdraw CTA states", () => {
           expect(status).equals("loading");
         },
         ({ status, error }) => {
-          if (status != "uri-error") expect.fail();
+          if (status != "error") expect.fail();
           if (!error) expect.fail();
-          if (!error.hasError) expect.fail();
+          // if (!error.hasError) expect.fail();
-          if (error.operational) expect.fail();
+          // if (error.operational) expect.fail();
-          expect(error.message).eq("ERROR_NO-URI-FOR-WITHDRAWAL");
+          expect(error.cause?.message).eq("ERROR_NO-URI-FOR-WITHDRAWAL");
         },
       ],
       TestingContext,

packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx

@@ -19,16 +19,10 @@ import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { Amount } from "../../components/Amount.js";
 import { ErrorTalerOperation } from "../../components/ErrorTalerOperation.js";
-import { LoadingError } from "../../components/LoadingError.js";
 import { Part } from "../../components/Part.js";
 import { QR } from "../../components/QR.js";
 import { SelectList } from "../../components/SelectList.js";
-import {
+import { Input, LinkSuccess, SvgIcon } from "../../components/styled/index.js";
-  Input,
-  Link,
-  LinkSuccess,
-  SvgIcon,
-} from "../../components/styled/index.js";
 import { TermsOfService } from "../../components/TermsOfService/index.js";
 import { useTranslationContext } from "../../context/translation.js";
 import { Button } from "../../mui/Button.js";
@@ -36,30 +30,6 @@ import editIcon from "../../svg/edit_24px.svg";
 import { ExchangeDetails, WithdrawDetails } from "../../wallet/Transaction.js";
 import { State } from "./index.js";
 
-export function LoadingUriView({ error }: State.LoadingUriError): VNode {
-  const { i18n } = useTranslationContext();
-
-  return (
-    <LoadingError
-      title={
-        <i18n.Translate>Could not get the info from the URI</i18n.Translate>
-      }
-      error={error}
-    />
-  );
-}
-
-export function LoadingInfoView({ error }: State.LoadingInfoError): VNode {
-  const { i18n } = useTranslationContext();
-
-  return (
-    <LoadingError
-      title={<i18n.Translate>Could not get info of withdrawal</i18n.Translate>}
-      error={error}
-    />
-  );
-}
-
 export function SuccessView(state: State.Success): VNode {
   const { i18n } = useTranslationContext();
   const currentTosVersionIsAccepted =
@@ -68,11 +38,7 @@ export function SuccessView(state: State.Success): VNode {
     <Fragment>
       {state.doWithdrawal.error && (
         <ErrorTalerOperation
-          title={
+          title={i18n.str`Could not finish the withdrawal operation`}
-            <i18n.Translate>
-              Could not finish the withdrawal operation
-            </i18n.Translate>
-          }
           error={state.doWithdrawal.error.errorDetail}
         />
       )}
@@ -103,7 +69,7 @@ export function SuccessView(state: State.Success): VNode {
           big
         />
         <Part
-          title={<i18n.Translate>Details</i18n.Translate>}
+          title={i18n.str`Details`}
           text={
             <WithdrawDetails
               amount={{
@@ -116,7 +82,7 @@ export function SuccessView(state: State.Success): VNode {
         {state.ageRestriction && (
           <Input>
             <SelectList
-              label={<i18n.Translate>Age restriction</i18n.Translate>}
+              label={i18n.str`Age restriction`}
               list={state.ageRestriction.list}
               name="age"
               value={state.ageRestriction.value}
@@ -148,11 +114,6 @@ export function SuccessView(state: State.Success): VNode {
       {state.talerWithdrawUri ? (
         <WithdrawWithMobile talerWithdrawUri={state.talerWithdrawUri} />
       ) : undefined}
-      <section>
-        <Link upperCased onClick={state.cancel}>
-          <i18n.Translate>Cancel</i18n.Translate>
-        </Link>
-      </section>
     </Fragment>
   );
 }
@@ -168,11 +129,7 @@ function WithdrawWithMobile({
   return (
     <section>
       <LinkSuccess upperCased onClick={() => setShowQR((qr) => !qr)}>
-        {!showQR ? (
+        {!showQR ? i18n.str`Withdraw to a mobile phone` : i18n.str`Hide QR`}
-          <i18n.Translate>Withdraw to a mobile phone</i18n.Translate>
-        ) : (
-          <i18n.Translate>Hide QR</i18n.Translate>
-        )}
       </LinkSuccess>
       {showQR && (
         <div>

packages/taler-wallet-webextension/src/hooks/useAsyncAsHook.ts

@@ -16,6 +16,7 @@
 import { TalerErrorDetail } from "@gnu-taler/taler-util";
 import { TalerError } from "@gnu-taler/taler-wallet-core";
 import { useEffect, useMemo, useState } from "preact/hooks";
+import { WalletError } from "../wxApi.js";
 
 export interface HookOk<T> {
   hasError: false;
@@ -26,13 +27,14 @@ export type HookError = HookGenericError | HookOperationalError;
 
 export interface HookGenericError {
   hasError: true;
-  operational: false;
+  type: "error";
   message: string;
 }
 
 export interface HookOperationalError {
   hasError: true;
-  operational: true;
+  type: "taler";
+  message: string;
   details: TalerErrorDetail;
 }
 
@@ -68,13 +70,21 @@ export function useAsyncAsHook<T>(
       if (e instanceof TalerError) {
         setHookResponse({
           hasError: true,
-          operational: true,
+          type: "taler",
+          message: e.message,
           details: e.errorDetail,
         });
+      } else if (e instanceof WalletError) {
+        setHookResponse({
+          hasError: true,
+          type: "taler",
+          message: e.message,
+          details: e.errorDetail.errorDetail,
+        });
       } else if (e instanceof Error) {
         setHookResponse({
           hasError: true,
-          operational: false,
+          type: "error",
           message: e.message,
         });
       }

packages/taler-wallet-webextension/src/hooks/useLang.ts

@@ -17,6 +17,7 @@
 import { useNotNullLocalStorage } from "./useLocalStorage.js";
 
 function getBrowserLang(): string | undefined {
+  if (typeof window === "undefined") return undefined;
   if (window.navigator.languages) return window.navigator.languages[0];
   if (window.navigator.language) return window.navigator.language;
   return undefined;

packages/taler-wallet-webextension/src/hooks/useLocalStorage.ts

@@ -75,6 +75,9 @@ export function useNotNullLocalStorage(
     }
   };
 
-  const isSaved = window.localStorage.getItem(key) !== null;
+  const isSaved =
+    typeof window === "undefined"
+      ? false
+      : window.localStorage.getItem(key) !== null;
   return [storedValue, setValue, isSaved];
 }

packages/taler-wallet-webextension/src/mui/Alert.stories.tsx

@@ -19,6 +19,7 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
+import { TranslatedString } from "@gnu-taler/taler-util";
 import { css } from "@linaria/core";
 import { ComponentChildren, Fragment, h, VNode } from "preact";
 import { Alert } from "./Alert.jsx";
@@ -53,16 +54,16 @@ export const BasicExample = (): VNode => (
 
 export const WithTitle = (): VNode => (
   <Wrapper>
-    <Alert title="Warning" severity="warning">
+    <Alert title={"Warning" as TranslatedString} severity="warning">
       this is an warning
     </Alert>
-    <Alert title="Error" severity="error">
+    <Alert title={"Error" as TranslatedString} severity="error">
       this is an error
     </Alert>
-    <Alert title="Success" severity="success">
+    <Alert title={"Success" as TranslatedString} severity="success">
       this is an success
     </Alert>
-    <Alert title="Info" severity="info">
+    <Alert title={"Info" as TranslatedString} severity="info">
       this is an info
     </Alert>
   </Wrapper>
@@ -74,16 +75,32 @@ const showSomething = async function (): Promise<void> {
 
 export const WithAction = (): VNode => (
   <Wrapper>
-    <Alert title="Warning" severity="warning" onClose={showSomething}>
+    <Alert
+      title={"Warning" as TranslatedString}
+      severity="warning"
+      onClose={showSomething}
+    >
       this is an warning
     </Alert>
-    <Alert title="Error" severity="error" onClose={showSomething}>
+    <Alert
+      title={"Error" as TranslatedString}
+      severity="error"
+      onClose={showSomething}
+    >
       this is an error
     </Alert>
-    <Alert title="Success" severity="success" onClose={showSomething}>
+    <Alert
+      title={"Success" as TranslatedString}
+      severity="success"
+      onClose={showSomething}
+    >
       this is an success
     </Alert>
-    <Alert title="Info" severity="info" onClose={showSomething}>
+    <Alert
+      title={"Info" as TranslatedString}
+      severity="info"
+      onClose={showSomething}
+    >
       this is an info
     </Alert>
   </Wrapper>

packages/taler-wallet-webextension/src/mui/Alert.tsx

@@ -13,6 +13,7 @@
  You should have received a copy of the GNU General Public License along with
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
+import { TranslatedString } from "@gnu-taler/taler-util";
 import { css } from "@linaria/core";
 import { ComponentChildren, h, VNode } from "preact";
 // eslint-disable-next-line import/extensions
@@ -61,7 +62,7 @@ const colorVariant = {
 };
 
 interface Props {
-  title?: string;
+  title?: TranslatedString;
   variant?: "filled" | "outlined" | "standard";
   role?: string;
   onClose?: () => Promise<void>;
@@ -110,20 +111,20 @@ function Message({
   title,
   children,
 }: {
-  title?: string;
+  title?: TranslatedString;
   children: ComponentChildren;
 }): VNode {
   return (
     <div
       class={css`
         padding: 8px 0px;
-        width: 100%;
+        width: 90%;
       `}
     >
       {title && (
         <Typography
           class={css`
-            font-weight: ${theme.typography.fontWeightMedium};
+            font-weight: ${theme.typography.fontWeightBold};
           `}
           gutterBottom
         >
@@ -160,6 +161,7 @@ export function Alert({
         "--color-main": theme.palette[severity].main,
         "--color-light": theme.palette[severity].light,
         // ...(style as any),
+        textAlign: "left",
       }}
       elevation={1}
     >

packages/taler-wallet-webextension/src/mui/Paper.tsx

@@ -29,9 +29,6 @@ const borderVariant = {
   `,
 };
 const baseStyle = css`
-  background-color: ${theme.palette.background.paper};
-  color: ${theme.palette.text.primary};
-
   .theme-dark & {
     background-image: var(--gradient-white-elevation);
   }

packages/taler-wallet-webextension/src/mui/colors/manipulation.ts

@@ -57,7 +57,7 @@ export function hexToRgb(color: string): string {
   let colors = color.match(re);
 
   if (colors && colors[0].length === 1) {
-    colors = colors.map((n) => n + n);
+    colors = colors.map((n) => n + n) as RegExpMatchArray;
   }
 
   return colors

packages/taler-wallet-webextension/src/platform/api.ts

@@ -146,9 +146,9 @@ export interface BackgroundPlatformAPI {
    */
   getPermissionsApi(): CrossBrowserPermissionsApi;
   /**
- * Used by the wallet backend to send notification about new information
+   * Used by the wallet backend to send notification about new information
- * @param message
+   * @param message
- */
+   */
   sendMessageToAllChannels(message: MessageFromBackend): void;
 
   /**
@@ -196,7 +196,6 @@ export interface ForegroundPlatformAPI {
    */
   openWalletURIFromPopup(talerUri: string): void;
 
-
   /**
    * Popup API
    *
@@ -248,5 +247,4 @@ export interface ForegroundPlatformAPI {
   listenToWalletBackground(
     listener: (message: MessageFromBackend) => void,
   ): () => void;
-
 }

packages/taler-wallet-webextension/src/platform/chrome.ts

@@ -14,17 +14,17 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import {
+import { classifyTalerUri, Logger, TalerUriType } from "@gnu-taler/taler-util";
-  classifyTalerUri, Logger,
-  TalerUriType
-} from "@gnu-taler/taler-util";
 import { WalletOperations } from "@gnu-taler/taler-wallet-core";
 import { BackgroundOperations } from "../wxApi.js";
 import {
-  BackgroundPlatformAPI, CrossBrowserPermissionsApi, ForegroundPlatformAPI, MessageFromBackend,
+  BackgroundPlatformAPI,
+  CrossBrowserPermissionsApi,
+  ForegroundPlatformAPI,
+  MessageFromBackend,
   MessageFromFrontend,
   MessageResponse,
-  Permissions
+  Permissions,
 } from "./api.js";
 
 const api: BackgroundPlatformAPI & ForegroundPlatformAPI = {
@@ -306,13 +306,12 @@ function openWalletPageFromPopup(page: string): void {
   });
 }
 
-
 let nextMessageIndex = 0;
 
 /**
  * To be used by the foreground
- * @param message 
+ * @param message
- * @returns 
+ * @returns
  */
 async function sendMessageToBackground<
   Op extends WalletOperations | BackgroundOperations,
@@ -321,13 +320,13 @@ async function sendMessageToBackground<
 
   return new Promise<any>((resolve, reject) => {
     logger.trace("send operation to the wallet background", message);
-    let timedout = false
+    let timedout = false;
     setTimeout(() => {
-      timedout = true
+      timedout = true;
-      reject("timedout")
+      reject("timedout");
     }, 2000);
     chrome.runtime.sendMessage(messageWithId, (backgroundResponse) => {
-      if (timedout) return false
+      if (timedout) return false;
       if (chrome.runtime.lastError) {
         reject(chrome.runtime.lastError.message);
       } else {
@@ -358,7 +357,6 @@ function listenToWalletBackground(listener: (m: any) => void): () => void {
 
 const allPorts: chrome.runtime.Port[] = [];
 
-
 function sendMessageToAllChannels(message: MessageFromBackend): void {
   for (const notif of allPorts) {
     // const message: MessageFromBackend = { type: msg.type };
@@ -578,26 +576,26 @@ function setAlertedIcon(): void {
 
 interface OffscreenCanvasRenderingContext2D
   extends CanvasState,
-  CanvasTransform,
+    CanvasTransform,
-  CanvasCompositing,
+    CanvasCompositing,
-  CanvasImageSmoothing,
+    CanvasImageSmoothing,
-  CanvasFillStrokeStyles,
+    CanvasFillStrokeStyles,
-  CanvasShadowStyles,
+    CanvasShadowStyles,
-  CanvasFilters,
+    CanvasFilters,
-  CanvasRect,
+    CanvasRect,
-  CanvasDrawPath,
+    CanvasDrawPath,
-  CanvasUserInterface,
+    CanvasUserInterface,
-  CanvasText,
+    CanvasText,
-  CanvasDrawImage,
+    CanvasDrawImage,
-  CanvasImageData,
+    CanvasImageData,
-  CanvasPathDrawingStyles,
+    CanvasPathDrawingStyles,
-  CanvasTextDrawingStyles,
+    CanvasTextDrawingStyles,
-  CanvasPath {
+    CanvasPath {
   readonly canvas: OffscreenCanvas;
 }
 declare const OffscreenCanvasRenderingContext2D: {
   prototype: OffscreenCanvasRenderingContext2D;
-  new(): OffscreenCanvasRenderingContext2D;
+  new (): OffscreenCanvasRenderingContext2D;
 };
 
 interface OffscreenCanvas extends EventTarget {
@@ -610,7 +608,7 @@ interface OffscreenCanvas extends EventTarget {
 }
 declare const OffscreenCanvas: {
   prototype: OffscreenCanvas;
-  new(width: number, height: number): OffscreenCanvas;
+  new (width: number, height: number): OffscreenCanvas;
 };
 
 function createCanvas(size: number): OffscreenCanvas {

packages/taler-wallet-webextension/src/platform/firefox.ts

@@ -14,7 +14,12 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { BackgroundPlatformAPI, CrossBrowserPermissionsApi, ForegroundPlatformAPI, Permissions } from "./api.js";
+import {
+  BackgroundPlatformAPI,
+  CrossBrowserPermissionsApi,
+  ForegroundPlatformAPI,
+  Permissions,
+} from "./api.js";
 import chromePlatform, {
   containsHostPermissions as chromeHostContains,
   removeHostPermissions as chromeHostRemove,

packages/taler-wallet-webextension/src/popup/BalancePage.tsx

@@ -19,12 +19,13 @@ import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { Fragment, h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
 import { BalanceTable } from "../components/BalanceTable.js";
+import { ErrorAlertView } from "../components/CurrentAlerts.js";
 import { Loading } from "../components/Loading.js";
-import { LoadingError } from "../components/LoadingError.js";
 import { MultiActionButton } from "../components/MultiActionButton.js";
+import { alertFromError, ErrorAlert } from "../context/alert.js";
 import { useBackendContext } from "../context/backend.js";
 import { useTranslationContext } from "../context/translation.js";
-import { HookError, useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
+import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
 import { Button } from "../mui/Button.js";
 import { ButtonHandler } from "../mui/handlers.js";
 import { compose, StateViewMap } from "../utils/index.js";
@@ -47,7 +48,7 @@ export namespace State {
 
   export interface Error {
     status: "error";
-    error: HookError;
+    error: ErrorAlert;
   }
 
   export interface Action {
@@ -73,6 +74,7 @@ function useComponentState({
   goToWalletManualWithdraw,
 }: Props): State {
   const api = useBackendContext();
+  const { i18n } = useTranslationContext();
   const [addingAction, setAddingAction] = useState(false);
   const state = useAsyncAsHook(() =>
     api.wallet.call(WalletApiOperation.GetBalances, {}),
@@ -94,7 +96,7 @@ function useComponentState({
   if (state.hasError) {
     return {
       status: "error",
-      error: state,
+      error: alertFromError(i18n.str`Could not load the balance`, state),
     };
   }
   if (addingAction) {
@@ -123,7 +125,7 @@ function useComponentState({
 
 const viewMapping: StateViewMap<State> = {
   loading: Loading,
-  error: ErrorView,
+  error: ErrorAlertView,
   action: ActionView,
   balance: BalanceView,
 };
@@ -134,16 +136,6 @@ export const BalancePage = compose(
   viewMapping,
 );
 
-function ErrorView({ error }: State.Error): VNode {
-  const { i18n } = useTranslationContext();
-  return (
-    <LoadingError
-      title={<i18n.Translate>Could not load balance page</i18n.Translate>}
-      error={error}
-    />
-  );
-}
-
 function ActionView({ cancel }: State.Action): VNode {
   return <AddNewActionView onCancel={cancel.onClick!} />;
 }
@@ -179,7 +171,7 @@ export function BalanceView(state: State.Balances): VNode {
         </Button>
         {currencyWithNonZeroAmount.length > 0 && (
           <MultiActionButton
-            label={(s) => <i18n.Translate>Send {s}</i18n.Translate>}
+            label={(s) => i18n.str`Send ${s}`}
             actions={currencyWithNonZeroAmount}
             onClick={(c) => state.goToWalletDeposit(c)}
           />

packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx

@@ -33,7 +33,7 @@ export function NoBalanceHelp({
   const { i18n } = useTranslationContext();
   return (
     <Paper class={margin}>
-      <Alert title="Your wallet is empty." severity="info">
+      <Alert title={i18n.str`Your wallet is empty.`} severity="info">
         <Button
           fullWidth
           color="info"

packages/taler-wallet-webextension/src/svg/progress.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin:auto;background:#fff;display:block;" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+  <defs>
+    <clipPath id="progress-cp" x="0" y="0" width="100" height="100">
+      <rect x="0" y="0" width="0" height="100">
+        <animate attributeName="width" repeatCount="indefinite" dur="2s" values="0;100;100" keyTimes="0;0.5;1"></animate>
+        <animate attributeName="x" repeatCount="indefinite" dur="2s" values="0;0;100" keyTimes="0;0.5;1"></animate>
+      </rect>
+    </clipPath>
+  </defs>
+  <path fill="none" stroke="darkgrey" stroke-width="1.04" d="M10.000000000000004 44.019999999999996L89.99999999999999 44.019999999999996A5.98 5.98 0 0 1 95.97999999999999 50L95.97999999999999 50A5.98 5.98 0 0 1 89.99999999999999 55.980000000000004L10.000000000000004 55.980000000000004A5.98 5.98 0 0 1 4.020000000000003 50L4.020000000000003 50A5.98 5.98 0 0 1 10.000000000000004 44.019999999999996 Z"></path>
+  <path fill="#0042b2" clip-path="url(#progress-cp)" d="M10.000000000000004 45.54L90 45.54A4.460000000000001 4.460000000000001 0 0 1 94.46 50L94.46 50A4.460000000000001 4.460000000000001 0 0 1 90 54.46L10.000000000000004 54.46A4.460000000000001 4.460000000000001 0 0 1 5.540000000000003 50L5.540000000000003 50A4.460000000000001 4.460000000000001 0 0 1 10.000000000000004 45.54 Z"></path>
+</svg>

packages/taler-wallet-webextension/src/test-utils.ts

@@ -32,6 +32,7 @@ import {
 } from "preact";
 import { render as renderToString } from "preact-render-to-string";
 import { BackendProvider } from "./context/backend.js";
+import { TranslationProvider } from "./context/translation.js";
 import { BackgroundApiClient, wxApi } from "./wxApi.js";
 
 // When doing tests we want the requestAnimationFrame to be as fast as possible.
@@ -359,10 +360,12 @@ export function createWalletApiMock(): {
   };
 
   function TestingContext({
-    children,
+    children: _cs,
   }: {
     children: ComponentChildren;
   }): VNode {
+    let children = _cs;
+    children = create(TranslationProvider, { children }, children);
     return create(
       BackendProvider,
       {

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 {
+import { ConfirmProviderView, SelectProviderView } from "./views.js";
-  ConfirmProviderView,
-  LoadingUriView,
-  SelectProviderView,
-} from "./views.js";
 
 export interface Props {
   onBack: () => Promise<void>;
@@ -50,8 +47,8 @@ export namespace State {
   }
 
   export interface LoadingUriError {
-    status: "loading-error";
+    status: "error";
-    error: HookError;
+    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,
 };

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}

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>
   );
 }

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
+      <AlertView
-        title={<i18n.Translate>Could not load backup providers</i18n.Translate>}
+        alert={alertFromError(
-        error={status}
+          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 ? (
+              {providers.length > 1
-                <i18n.Translate>Sync all backups</i18n.Translate>
+                ? i18n.str`Sync all backups`
-              ) : (
+                : i18n.str`Sync now`}
-                <i18n.Translate>Sync now</i18n.Translate>
-              )}
             </Button>
             <Button variant="contained" color="success" onClick={onAddProvider}>
               <i18n.Translate>Add provider</i18n.Translate>

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";
+    status: "error";
-    error: HookError;
+    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,

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",
+      status: "error",
-      error: hook,
+      error: alertFromError(i18n.str`Could not load balance information`, hook),
     };
   }
   const { accounts, balances } = hook.response;

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 {
+import { Input, SubTitle, WarningBox } from "../../components/styled/index.js";
-  ErrorText,
-  Input,
-  InputWithLabel,
-  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={
+      title={i18n.str`A currency or an amount should be indicated`}
-        <i18n.Translate>
-          A currency or an amount should be indicated
-        </i18n.Translate>
-      }
     />
   );
 }
@@ -66,11 +44,7 @@ export function NoEnoughBalanceView({
 
   return (
     <ErrorMessage
-      title={
+      title={i18n.str`There is no enough balance to make a deposit for currency ${currency}`}
-        <i18n.Translate>
-          There is no enough balance to make a deposit for currency {currency}
-        </i18n.Translate>
-      }
     />
   );
 }
@@ -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
+            <AmountField label={i18n.str`Amount`} handler={state.amount} />
-              label={<i18n.Translate>Amount</i18n.Translate>}
-              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,
               }}

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";
+    status: "error";
-    error: HookError;
+    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,
 };

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";
@@ -58,6 +60,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",
+          status: "error",
-          error: hook,
+          error: alertFromError(i18n.str`Could not load exchanges`, hook),
         };
       }
       const currencies: Record<string, string> = {};

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 { Button } from "../../mui/Button.js";
-import { Contact, State } from "./index.js";
-import arrowIcon from "../../svg/chevron-down.svg";
-import { AmountField } from "../../components/AmountField.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";
-
+import { Contact, 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 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,

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";
+    status: "error";
-    error: HookError;
+    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,
 };
 

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();
 

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";
+    status: "error";
-    error: HookError;
+    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,

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",
+      status: "error",
-      error: hook,
+      error: alertFromError(
+        i18n.str`Could not load exchange details info`,
+        hook,
+      ),
     };
   }
 

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 (
+    return <ErrorMessage title={i18n.str`Could not find any exchange`} />;
-      <ErrorMessage
-        title={<i18n.Translate>Could not find any exchange</i18n.Translate>}
-      />
-    );
   }
   return (
     <ErrorMessage
-      title={
+      title={i18n.str`Could not find any exchange for the currency ${currency}`}
-        <i18n.Translate>
-          Could not find any exchange for the currency {currency}
-        </i18n.Translate>
-      }
     />
   );
 }

packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx

@@ -140,15 +140,13 @@ export function ExchangeSetUrlPage({
         )}
         {error && (
           <ErrorMessage
-            title={
+            title={i18n.str`Unable to verify this exchange`}
-              <i18n.Translate>Unable to verify this exchange</i18n.Translate>
-            }
             description={error}
           />
         )}
         {confirmationError && (
           <ErrorMessage
-            title={<i18n.Translate>Unable to add this exchange</i18n.Translate>}
+            title={i18n.str`Unable to add this exchange`}
             description={confirmationError}
           />
         )}

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
+      <AlertView
-        title={
+        alert={alertFromError(
-          <i18n.Translate>
+          i18n.str`Could not load the list of transactions`,
-            Could not load the list of transactions
+          state,
-          </i18n.Translate>
+        )}
-        }
-        error={state}
       />
     );
   }

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";
+    status: "error";
-    error: HookError;
+    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,
 };
 

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",
+      status: "error",
-      error: hook,
+      error: alertFromError(i18n.str`Could not load known bank accounts`, hook),
     };
   }
 

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}

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";
+    status: "error";
-    error: HookError;
+    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,
 };
 

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",
+      status: "error",
-      error: hook,
+      error: alertFromError(
+        i18n.str`Could not load user attention request`,
+        hook,
+      ),
     };
   }
 

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;

packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx

@@ -127,11 +127,7 @@ export function SetUrlView({
         </Title>
         {error && (
           <ErrorMessage
-            title={
+            title={i18n.str`Could not get provider information`}
-              <i18n.Translate>
-                Could not get provider information
-              </i18n.Translate>
-            }
             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}

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
+      <AlertView
-        title={
+        alert={alertFromError(
-          <i18n.Translate>
+          i18n.str`There was an error loading the provider detail for &quot;${providerURL}&quot;`,
-            There was an error loading the provider detail for &quot;
+          state,
-            {providerURL}&quot;
+        )}
-          </i18n.Translate>
-        }
-        error={state}
       />
     );
   }
@@ -270,9 +268,7 @@ function Error({ info }: { info: ProviderInfo }): VNode {
   if (info.lastError) {
     return (
       <ErrorMessage
-        title={
+        title={i18n.str`This provider has reported an error`}
-          <i18n.Translate>This provider has reported an error</i18n.Translate>
-        }
         description={info.lastError.hint}
       />
     );
@@ -282,32 +278,17 @@ function Error({ info }: { info: ProviderInfo }): VNode {
       case "backup-conflicting-device":
         return (
           <ErrorMessage
-            title={
+            title={i18n.str`There is conflict with another backup from &quot;${info.backupProblem.otherDeviceId}&quot;`}
-              <Fragment>
-                <i18n.Translate>
-                  There is conflict with another backup from{" "}
-                  <b>{info.backupProblem.otherDeviceId}</b>
-                </i18n.Translate>
-              </Fragment>
-            }
           />
         );
       case "backup-unreadable":
-        return (
+        return <ErrorMessage title={i18n.str`Backup is not readable`} />;
-          <ErrorMessage
-            title={<i18n.Translate>Backup is not readable</i18n.Translate>}
-          />
-        );
       default:
         return (
           <ErrorMessage
-            title={
+            title={i18n.str`Unknown backup problem: ${JSON.stringify(
-              <Fragment>
+              info.backupProblem,
-                <i18n.Translate>
+            )}`}
-                  Unknown backup problem: {JSON.stringify(info.backupProblem)}
-                </i18n.Translate>
-              </Fragment>
-            }
           />
         );
     }

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>}
+        title={i18n.str`Could not parse the payto URI`}
-        description={<i18n.Translate>Please check the uri</i18n.Translate>}
+        description={i18n.str`Please check the uri`}
       />
     );
   }

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={
+          label={i18n.str`Automatically open wallet based on page content`}
-            <i18n.Translate>
-              Automatically open wallet based on page content
-            </i18n.Translate>
-          }
           name="autoOpen"
           description={
             <i18n.Translate>
@@ -142,9 +138,7 @@ export function SettingsView({
         />
         {/* <Checkbox
           label={
-            <i18n.Translate>
+            i18n.str`Automatically check clipboard for Taler URI`
-              Automatically check clipboard for Taler URI
-            </i18n.Translate>
           }
           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={
+          description={i18n.str`More options and information useful for debugging`}
-            <i18n.Translate>
-              More options and information useful for debugging
-            </i18n.Translate>
-          }
           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>

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
+      <AlertView
-        title={
+        alert={alertFromError(
-          <i18n.Translate>
+          i18n.str`Could not load transaction information`,
-            Could not load the transaction information
+          state,
-          </i18n.Translate>
+        )}
-        }
-        error={state}
       />
     );
   }
@@ -199,14 +198,14 @@ export function TransactionView({
     return (
       <Fragment>
         <section style={{ padding: 8, textAlign: "center" }}>
-          <ErrorTalerOperation
+          {transaction?.error ? (
-            title={
+            <ErrorAlertView
-              <i18n.Translate>
+              error={alertFromError(
-                There was an error trying to complete the transaction
+                i18n.str`There was an error trying to complete the transaction`,
-              </i18n.Translate>
+                transaction.error,
-            }
+              )}
-            error={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>}
+          title={i18n.str`Invoice ID`}
-          text={transaction.info.orderId}
+          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>}
+          title={i18n.str`Merchant`}
-          text={transaction.info.merchant.name}
+          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>}
+          title={i18n.str`Purchase summary`}
-          text={transaction.info.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>}
+            title={i18n.str`Subject`}
-            text={transaction.info.summary}
+            text={transaction.info.summary as TranslatedString}
             kind="neutral"
           />
         ) : undefined}
         <Part
-          title={<i18n.Translate>Exchange</i18n.Translate>}
+          title={i18n.str`Exchange`}
-          text={transaction.exchangeBaseUrl}
+          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>}
+            title={i18n.str`Subject`}
-            text={transaction.info.summary}
+            text={transaction.info.summary as TranslatedString}
             kind="neutral"
           />
         ) : undefined}
         <Part
-          title={<i18n.Translate>Exchange</i18n.Translate>}
+          title={i18n.str`Exchange`}
-          text={transaction.exchangeBaseUrl}
+          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>}
+            title={i18n.str`Subject`}
-            text={transaction.info.summary}
+            text={transaction.info.summary as TranslatedString}
             kind="neutral"
           />
         ) : undefined}
         <Part
-          title={<i18n.Translate>Exchange</i18n.Translate>}
+          title={i18n.str`Exchange`}
-          text={transaction.exchangeBaseUrl}
+          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>}
+            title={i18n.str`Subject`}
-            text={transaction.info.summary}
+            text={transaction.info.summary as TranslatedString}
             kind="neutral"
           />
         ) : undefined}
         <Part
-          title={<i18n.Translate>Exchange</i18n.Translate>}
+          title={i18n.str`Exchange`}
-          text={transaction.exchangeBaseUrl}
+          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