1 files changed, 53 insertions, 40 deletions

diff --git a/packages/taler-wallet-webextension/src/components/Diagnostics.tsx b/packages/taler-wallet-webextension/src/components/Diagnostics.tsx
index b48deb847..8bd0abcaf 100644
--- a/packages/taler-wallet-webextension/src/components/Diagnostics.tsx
+++ b/packages/taler-wallet-webextension/src/components/Diagnostics.tsx
@@ -1,6 +1,6 @@
 /*
  This file is part of GNU Taler
- (C) 2021 Taler Systems S.A.
+ (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
@@ -15,59 +15,72 @@
  */
 
 import { WalletDiagnostics } from "@gnu-taler/taler-util";
-import { h } from "preact";
-import { JSX } from "preact/jsx-runtime";
-import { PageLink } from "../renderHtml";
+import { Fragment, h, VNode } from "preact";
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
 
 interface Props {
   timedOut: boolean;
-  diagnostics: WalletDiagnostics | undefined
+  diagnostics: WalletDiagnostics | undefined;
 }
 
-export function Diagnostics({timedOut, diagnostics}: Props): JSX.Element | null {
-
+export function Diagnostics({ timedOut, diagnostics }: Props): VNode {
+  const { i18n } = useTranslationContext();
   if (timedOut) {
-    return <p>Diagnostics timed out. Could not talk to the wallet backend.</p>;
+    return (
+      <p>
+        <i18n.Translate>
+          Diagnostics timed out. Could not talk to the wallet backend.
+        </i18n.Translate>
+      </p>
+    );
   }
 
   if (diagnostics) {
     if (diagnostics.errors.length === 0) {
-      return null;
-    } else {
-      return (
-        <div
-          style={{
-            borderLeft: "0.5em solid red",
-            paddingLeft: "1em",
-            paddingTop: "0.2em",
-            paddingBottom: "0.2em",
-          }}
-        >
-          <p>Problems detected:</p>
-          <ol>
-            {diagnostics.errors.map((errMsg) => (
-              <li key={errMsg}>{errMsg}</li>
-            ))}
-          </ol>
-          {diagnostics.firefoxIdbProblem ? (
-            <p>
+      return <Fragment />;
+    }
+    return (
+      <div
+        style={{
+          borderLeft: "0.5em solid red",
+          paddingLeft: "1em",
+          paddingTop: "0.2em",
+          paddingBottom: "0.2em",
+        }}
+      >
+        <p>
+          <i18n.Translate>Problems detected:</i18n.Translate>
+        </p>
+        <ol>
+          {diagnostics.errors.map((errMsg) => (
+            <li key={errMsg}>{errMsg}</li>
+          ))}
+        </ol>
+        {diagnostics.firefoxIdbProblem ? (
+          <p>
+            <i18n.Translate>
               Please check in your <code>about:config</code> settings that you
               have IndexedDB enabled (check the preference name{" "}
               <code>dom.indexedDB.enabled</code>).
-            </p>
-          ) : null}
-          {diagnostics.dbOutdated ? (
-            <p>
+            </i18n.Translate>
+          </p>
+        ) : null}
+        {diagnostics.dbOutdated ? (
+          <p>
+            <i18n.Translate>
               Your wallet database is outdated. Currently automatic migration is
-              not supported. Please go{" "}
-              <PageLink pageName="/reset-required">here</PageLink> to reset
-              the wallet database.
-            </p>
-          ) : null}
-        </div>
-      );
-    }
+              not supported. Please go <i18n.Translate>here</i18n.Translate>
+              to reset the wallet database.
+            </i18n.Translate>
+          </p>
+        ) : null}
+      </div>
+    );
   }
 
-  return <p>Running diagnostics ...</p>;
+  return (
+    <p>
+      <i18n.Translate>Running diagnostics</i18n.Translate> ...
+    </p>
+  );
 }