fix #8395

1 files changed, 12 insertions, 2 deletions

diff --git a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
index 0a53d33ba..06c8a81ef 100644
--- a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
+++ b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
@@ -18,15 +18,18 @@ import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
 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: TranslatedString;
-  description?: string | VNode;
+  description?: string | VNode | Error;
 }): VNode | null {
   const [showErrorDetail, setShowErrorDetail] = useState(false);
+  const [showMore, setShowMore] = useState(false);
+  const { i18n } = useTranslationContext();
   return (
     <ErrorBox style={{ paddingTop: 0, paddingBottom: 0 }}>
       <div>
@@ -44,7 +47,14 @@ export function ErrorMessage({
           </button>
         )}
       </div>
-      {showErrorDetail && <p>{description}</p>}
+      {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>
   );
 }