From d58945c830a33910dd93bc159c1ffe5d490df846 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Wed, 16 Jun 2021 17:17:12 -0300
Subject: split wallet/popup components. created hooks, components, context
 folder

---
 .../src/components/Diagnostics.tsx                 | 76 ++++++++++++++++++++++
 1 file changed, 76 insertions(+)
 create mode 100644 packages/taler-wallet-webextension/src/components/Diagnostics.tsx

(limited to 'packages/taler-wallet-webextension/src/components/Diagnostics.tsx')

diff --git a/packages/taler-wallet-webextension/src/components/Diagnostics.tsx b/packages/taler-wallet-webextension/src/components/Diagnostics.tsx
new file mode 100644
index 000000000..146b0dd3e
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/components/Diagnostics.tsx
@@ -0,0 +1,76 @@
+import { useState, useEffect } from "preact/hooks";
+import { getDiagnostics } from "../wxApi";
+import { PageLink } from "../renderHtml";
+import { WalletDiagnostics } from "@gnu-taler/taler-util";
+import { JSX } from "preact/jsx-runtime";
+
+
+export function Diagnostics(): JSX.Element | null {
+  const [timedOut, setTimedOut] = useState(false);
+  const [diagnostics, setDiagnostics] = useState<WalletDiagnostics | undefined>(
+    undefined
+  );
+
+  useEffect(() => {
+    let gotDiagnostics = false;
+    setTimeout(() => {
+      if (!gotDiagnostics) {
+        console.error("timed out");
+        setTimedOut(true);
+      }
+    }, 1000);
+    const doFetch = async (): Promise<void> => {
+      const d = await getDiagnostics();
+      console.log("got diagnostics", d);
+      gotDiagnostics = true;
+      setDiagnostics(d);
+    };
+    console.log("fetching diagnostics");
+    doFetch();
+  }, []);
+
+  if (timedOut) {
+    return <p>Diagnostics timed out. Could not talk to the wallet backend.</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>
+              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>
+              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>
+      );
+    }
+  }
+
+  return <p>Running diagnostics ...</p>;
+}
-- 
cgit v1.2.3