fix #7152

21 files changed, 261 insertions, 175 deletions

diff --git a/packages/taler-wallet-webextension/src/components/AmountField.stories.tsx b/packages/taler-wallet-webextension/src/components/AmountField.stories.tsx
index 9a1d96014..61c4a7661 100644
--- a/packages/taler-wallet-webextension/src/components/AmountField.stories.tsx
+++ b/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}
diff --git a/packages/taler-wallet-webextension/src/components/AmountField.tsx b/packages/taler-wallet-webextension/src/components/AmountField.tsx
index 2e8942f0d..4936e0604 100644
--- a/packages/taler-wallet-webextension/src/components/AmountField.tsx
+++ b/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;
diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
index 6f4980aff..d233547a4 100644
--- a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
+++ b/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
-      name={<i18n.Translate>Account</i18n.Translate>}
-      value={payto.targetPath}
-    />
+    <Row name={i18n.str`Account`} value={payto.targetPath} />
   ) : payto.targetType === "x-taler-bank" ? (
     <Fragment>
-      <Row
-        name={<i18n.Translate>Bank host</i18n.Translate>}
-        value={payto.host}
-      />
-      <Row
-        name={<i18n.Translate>Bank account</i18n.Translate>}
-        value={payto.account}
-      />
+      <Row name={i18n.str`Bank host`} value={payto.host} />
+      <Row name={i18n.str`Bank account`} 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
-          name={<i18n.Translate>Subject</i18n.Translate>}
-          value={subject}
-          literal
-        />
+        <Row name={i18n.str`Subject`} value={subject} literal />
         {receiver ? (
-          <Row
-            name={<i18n.Translate>Receiver name</i18n.Translate>}
-            value={receiver}
-          />
+          <Row name={i18n.str`Receiver name`} value={receiver} />
         ) : undefined}
       </table>
     </div>
@@ -200,7 +185,7 @@ function Row({
   value,
   literal,
 }: {
-  name: VNode;
+  name: TranslatedString;
   value: string | VNode;
   literal?: boolean;
 }): VNode {
diff --git a/packages/taler-wallet-webextension/src/components/Banner.tsx b/packages/taler-wallet-webextension/src/components/Banner.tsx
index a91fd384f..40a4847b8 100644
--- a/packages/taler-wallet-webextension/src/components/Banner.tsx
+++ b/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;
diff --git a/packages/taler-wallet-webextension/src/components/Checkbox.tsx b/packages/taler-wallet-webextension/src/components/Checkbox.tsx
index b6fa8b663..70dfab597 100644
--- a/packages/taler-wallet-webextension/src/components/Checkbox.tsx
+++ b/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,
diff --git a/packages/taler-wallet-webextension/src/components/CurrentAlerts.tsx b/packages/taler-wallet-webextension/src/components/CurrentAlerts.tsx
new file mode 100644
index 000000000..a56c82dee
--- /dev/null
+++ b/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>;
+}
diff --git a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
index ce8dc0ad1..11f526865 100644
--- a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
+++ b/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);
diff --git a/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx b/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx
index a7223d2db..f8203f38a 100644
--- a/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx
+++ b/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();
diff --git a/packages/taler-wallet-webextension/src/components/Loading.tsx b/packages/taler-wallet-webextension/src/components/Loading.tsx
index f2195b646..3a6daaaa6 100644
--- a/packages/taler-wallet-webextension/src/components/Loading.tsx
+++ b/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);
-  useEffect(() => {
-    const id = setTimeout(() => {
-      setTooLong(true);
-    }, 500);
-    return () => {
-      clearTimeout(id);
-    };
-  });
-  if (tooLong) {
-    return (
-      <section style={{ margin: "auto" }}>
-        <CenteredText>
-          <i18n.Translate>Loading</i18n.Translate>...
-        </CenteredText>
-      </section>
-    );
-  }
-  return <Fragment />;
+  return (
+    <section style={{ margin: "auto" }}>
+      <CenteredText class={fadeIn}>
+        <i18n.Translate>Loading</i18n.Translate>...
+      </CenteredText>
+      {/* <div class={ripple} style={{ "--size": "250px" }}>
+        <div></div>
+        <div></div>
+      </div> */}
+      <div class={fadeIn} dangerouslySetInnerHTML={{ __html: ProgressIcon }} />
+    </section>
+  );
 }
+
+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;
+    }
+  }
+`;
diff --git a/packages/taler-wallet-webextension/src/components/LoadingError.tsx b/packages/taler-wallet-webextension/src/components/LoadingError.tsx
deleted file mode 100644
index 2cd8bee3b..000000000
--- a/packages/taler-wallet-webextension/src/components/LoadingError.tsx
+++ /dev/null
@@ -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} />;
-}
diff --git a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx
index 673ff3dc2..d6a730a4f 100644
--- a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx
+++ b/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>;
 }
diff --git a/packages/taler-wallet-webextension/src/components/Part.tsx b/packages/taler-wallet-webextension/src/components/Part.tsx
index a488ca4dc..1449bcac6 100644
--- a/packages/taler-wallet-webextension/src/components/Part.tsx
+++ b/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;
-  text: VNode | string;
+  title: VNode | TranslatedString;
+  text: VNode | TranslatedString;
   kind?: Kind;
   big?: boolean;
   showSign?: boolean;
diff --git a/packages/taler-wallet-webextension/src/components/PaymentButtons.tsx b/packages/taler-wallet-webextension/src/components/PaymentButtons.tsx
index def1e16eb..30c2ef833 100644
--- a/packages/taler-wallet-webextension/src/components/PaymentButtons.tsx
+++ b/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>}
-              text={payStatus.contractTerms.fulfillment_message}
+              title={i18n.str`Merchant 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 ? (
-          <i18n.Translate>Pay with a mobile phone</i18n.Translate>
-        ) : (
-          <i18n.Translate>Hide QR</i18n.Translate>
-        )}
+        {!showQR ? i18n.str`Pay with a mobile phone` : i18n.str`Hide QR`}
       </LinkSuccess>
       {showQR && (
         <div>
diff --git a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
index e41ff2836..2bba86dba 100644
--- a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
+++ b/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,
diff --git a/packages/taler-wallet-webextension/src/components/SelectList.tsx b/packages/taler-wallet-webextension/src/components/SelectList.tsx
index 3ceac752e..809698711 100644
--- a/packages/taler-wallet-webextension/src/components/SelectList.tsx
+++ b/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;
   };
diff --git a/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.stories.tsx b/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.stories.tsx
index 841583113..8c94e6e60 100644
--- a/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.stories.tsx
+++ b/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,
     // },
diff --git a/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.tsx b/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.tsx
index 47c10347c..9871611f2 100644
--- a/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.tsx
+++ b/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
-        title={
-          <i18n.Translate>
-            Could not load purchase proposal details
-          </i18n.Translate>
-        }
-        error={error}
+      <AlertView
+        alert={alertFromError(
+          i18n.str`Could not load purchase proposal details`,
+          error,
+          { proposalId },
+        )}
       />
     </Modal>
   );
diff --git a/packages/taler-wallet-webextension/src/components/TermsOfService/index.ts b/packages/taler-wallet-webextension/src/components/TermsOfService/index.ts
index d7716f208..a8c1558d8 100644
--- a/packages/taler-wallet-webextension/src/components/TermsOfService/index.ts
+++ b/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.ErrorAccepting
+  | State.Error
   | State.ShowButtonsAccepted
   | State.ShowButtonsNotAccepted
   | State.ShowContent;
@@ -47,14 +45,9 @@ export namespace State {
     error: undefined;
   }
 
-  export interface LoadingUriError {
-    status: "loading-error";
-    error: HookError;
-  }
-
-  export interface ErrorAccepting {
-    status: "error-accepting";
-    error: HookError;
+  export interface Error {
+    status: "error";
+    error: ErrorAlert;
   }
 
   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(
diff --git a/packages/taler-wallet-webextension/src/components/TermsOfService/state.ts b/packages/taler-wallet-webextension/src/components/TermsOfService/state.ts
index 3b75965d3..c25c0ed13 100644
--- a/packages/taler-wallet-webextension/src/components/TermsOfService/state.ts
+++ b/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>(
-    undefined,
-  );
+  const { i18n } = useTranslationContext();
+  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",
-      error: terms,
+      status: "error",
+      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) {
-        //FIXME: uncomment this and display error
-        // setErrorAccepting(e.message);
-        setErrorAccepting(e);
-      }
+      pushAlert(alertFromError(i18n.str`Could not accept terms of service`, e));
     }
   }
 
diff --git a/packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx b/packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx
index a7e03fd01..0b5a71b3e 100644
--- a/packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx
+++ b/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 { ToggleHandler } from "../../mui/handlers.js";
+import { useTranslationContext } from "../../context/translation.js";
 import { Button } from "../../mui/Button.js";
-import { ExchangeTosStatus } from "@gnu-taler/taler-util";
-
-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}
-    />
-  );
-}
+import { State } from "./index.js";
 
 export function ShowButtonsAcceptedTosView({
   termsAccepted,
   showingTermsOfService,
-  terms,
 }: State.ShowButtonsAccepted): VNode {
   const { i18n } = useTranslationContext();
   const ableToReviewTermsOfService =
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index 8e98f75eb..e36502333 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/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 }>`