1 files changed, 13 insertions, 32 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx
index 46d54e871..9b72c0fae 100644
--- a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx
@@ -23,11 +23,12 @@ import {
   WalletApiOperation,
 } from "@gnu-taler/taler-wallet-core";
 import { Fragment, h, VNode } from "preact";
+import { AlertView } from "../components/CurrentAlerts.js";
 import { ErrorMessage } from "../components/ErrorMessage.js";
 import { Loading } from "../components/Loading.js";
-import { LoadingError } from "../components/LoadingError.js";
 import { PaymentStatus, SmallLightText } from "../components/styled/index.js";
 import { Time } from "../components/Time.js";
+import { alertFromError } from "../context/alert.js";
 import { useBackendContext } from "../context/backend.js";
 import { useTranslationContext } from "../context/translation.js";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
@@ -65,14 +66,11 @@ export function ProviderDetailPage({
   }
   if (state.hasError) {
     return (
-      <LoadingError
-        title={
-          <i18n.Translate>
-            There was an error loading the provider detail for &quot;
-            {providerURL}&quot;
-          </i18n.Translate>
-        }
-        error={state}
+      <AlertView
+        alert={alertFromError(
+          i18n.str`There was an error loading the provider detail for &quot;${providerURL}&quot;`,
+          state,
+        )}
       />
     );
   }
@@ -270,9 +268,7 @@ function Error({ info }: { info: ProviderInfo }): VNode {
   if (info.lastError) {
     return (
       <ErrorMessage
-        title={
-          <i18n.Translate>This provider has reported an error</i18n.Translate>
-        }
+        title={i18n.str`This provider has reported an error`}
         description={info.lastError.hint}
       />
     );
@@ -282,32 +278,17 @@ function Error({ info }: { info: ProviderInfo }): VNode {
       case "backup-conflicting-device":
         return (
           <ErrorMessage
-            title={
-              <Fragment>
-                <i18n.Translate>
-                  There is conflict with another backup from{" "}
-                  <b>{info.backupProblem.otherDeviceId}</b>
-                </i18n.Translate>
-              </Fragment>
-            }
+            title={i18n.str`There is conflict with another backup from &quot;${info.backupProblem.otherDeviceId}&quot;`}
           />
         );
       case "backup-unreadable":
-        return (
-          <ErrorMessage
-            title={<i18n.Translate>Backup is not readable</i18n.Translate>}
-          />
-        );
+        return <ErrorMessage title={i18n.str`Backup is not readable`} />;
       default:
         return (
           <ErrorMessage
-            title={
-              <Fragment>
-                <i18n.Translate>
-                  Unknown backup problem: {JSON.stringify(info.backupProblem)}
-                </i18n.Translate>
-              </Fragment>
-            }
+            title={i18n.str`Unknown backup problem: ${JSON.stringify(
+              info.backupProblem,
+            )}`}
           />
         );
     }