1 files changed, 42 insertions, 16 deletions
diff --git a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
index cfcef16d5..06c8a81ef 100644
--- a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
+++ b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
@@ -1,6 +1,6 @@
 /*
  This file is part of GNU Taler
- (C) 2019 Taler Systems SA
+ (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
@@ -13,22 +13,48 @@
  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 { VNode, h } from "preact";
+import { TranslatedString } from "@gnu-taler/taler-util";
+import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
-import arrowDown from '../../static/img/chevron-down.svg';
-import { ErrorBox } from "./styled";
+import arrowDown from "../svg/chevron-down.inline.svg";
+import { ErrorBox } from "./styled/index.js";
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
 
-export function ErrorMessage({ title, description }: { title?: string|VNode; description?: string; }) {
+export function ErrorMessage({
+  title,
+  description,
+}: {
+  title: TranslatedString;
+  description?: string | VNode | Error;
+}): VNode | null {
   const [showErrorDetail, setShowErrorDetail] = useState(false);
-  if (!title)
-    return null;
-  return <ErrorBox style={{paddingTop: 0, paddingBottom: 0}}>
-    <div>
-      <p>{title}</p>
-      { description && <button onClick={() => { setShowErrorDetail(v => !v); }}>
-        <img style={{ height: '1.5em' }} src={arrowDown} />
-      </button> }
-    </div>
-    {showErrorDetail && <p>{description}</p>}
-  </ErrorBox>;
+  const [showMore, setShowMore] = useState(false);
+  const { i18n } = useTranslationContext();
+  return (
+    <ErrorBox style={{ paddingTop: 0, paddingBottom: 0 }}>
+      <div>
+        <p>{title}</p>
+        {description && (
+          <button
+            onClick={() => {
+              setShowErrorDetail((v) => !v);
+            }}
+          >
+            <div
+              style={{ height: "1.5em" }}
+              dangerouslySetInnerHTML={{ __html: arrowDown }}
+            />
+          </button>
+        )}
+      </div>
+      {showErrorDetail && description && <p>
+        {description instanceof Error && !showMore ? description.message : description.toString()}
+        {description instanceof Error && <div>
+          <a href="#" onClick={(e) => {
+            setShowMore(!showMore)
+            e.preventDefault()
+          }}>{showMore ? i18n.str`show less` : i18n.str`show more`}  </a> </div>}
+      </p>}
+    </ErrorBox>
+  );
 }