1 files changed, 57 insertions, 18 deletions

diff --git a/packages/taler-wallet-webextension/src/components/CurrentAlerts.tsx b/packages/taler-wallet-webextension/src/components/CurrentAlerts.tsx
index a56c82dee..47863d73e 100644
--- a/packages/taler-wallet-webextension/src/components/CurrentAlerts.tsx
+++ b/packages/taler-wallet-webextension/src/components/CurrentAlerts.tsx
@@ -18,7 +18,6 @@ import { ComponentChildren, Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { useTranslationContext } from "../../../web-util/src/index.browser.js";
 import {
-  ErrorAlert,
   Alert as AlertNotification,
   useAlertContext,
 } from "../context/alert.js";
@@ -37,41 +36,78 @@ function AlertContext({
   context: undefined | object;
 }): VNode {
   const [more, setMore] = useState(false);
+  const [wrap, setWrap] = useState(false);
   const { i18n } = useTranslationContext();
   if (!more) {
     return (
       <div style={{ display: "flex", justifyContent: "right" }}>
-        <a onClick={() => setMore(true)}>
+        <a
+          onClick={() => setMore(true)}
+          style={{ cursor: "pointer", textDecoration: "underline" }}
+        >
           <i18n.Translate>more info</i18n.Translate>
         </a>
       </div>
     );
   }
+  const errorInfo = JSON.stringify(
+    context === undefined ? { cause } : { context, cause },
+    undefined,
+    2,
+  );
   return (
-    <pre style={{ overflow: "overlay" }}>
-      {JSON.stringify(
-        context === undefined ? { cause } : { context, cause },
-        undefined,
-        2,
-      )}
-    </pre>
+    <Fragment>
+      <div style={{ display: "flex", justifyContent: "right" }}>
+        <a
+          onClick={() => setWrap(!wrap)}
+          style={{ cursor: "pointer", textDecoration: "underline" }}
+        >
+          <i18n.Translate>wrap text</i18n.Translate>
+        </a>
+        &nbsp;&nbsp;
+        <a
+          onClick={() => navigator.clipboard.writeText(errorInfo)}
+          style={{ cursor: "pointer", textDecoration: "underline" }}
+        >
+          <i18n.Translate>copy content</i18n.Translate>
+        </a>
+        &nbsp;&nbsp;
+        <a
+          onClick={() => setMore(false)}
+          style={{ cursor: "pointer", textDecoration: "underline" }}
+        >
+          <i18n.Translate>less info</i18n.Translate>
+        </a>
+      </div>
+      <pre
+        style={
+          wrap
+            ? {
+                whiteSpace: "pre-wrap",
+                overflowWrap: "anywhere",
+              }
+            : {
+                overflow: "overlay",
+              }
+        }
+      >
+        {errorInfo}
+      </pre>
+    </Fragment>
   );
 }
 
 export function ErrorAlertView({
-  error: alert,
+  error,
   onClose,
 }: {
-  error: ErrorAlert;
+  error: AlertNotification;
   onClose?: () => Promise<void>;
 }): VNode {
   return (
-    <Alert title={alert.message} severity={alert.type} onClose={onClose}>
-      <div style={{ display: "flex", flexDirection: "column" }}>
-        <div>{alert.description}</div>
-        <AlertContext context={alert.context} cause={alert.cause} />
-      </div>
-    </Alert>
+    <Wrapper>
+      <AlertView alert={error} onClose={onClose} />
+    </Wrapper>
   );
 }
 
@@ -86,6 +122,9 @@ export function AlertView({
     <Alert title={alert.message} severity={alert.type} onClose={onClose}>
       <div style={{ display: "flex", flexDirection: "column" }}>
         <div>{alert.description}</div>
+        {alert.type === "error" ? (
+          <AlertContext context={alert.context} cause={alert.cause} />
+        ) : undefined}
       </div>
     </Alert>
   );
@@ -104,5 +143,5 @@ export function CurrentAlerts(): VNode {
 }
 
 function Wrapper({ children }: { children: ComponentChildren }): VNode {
-  return <div style={{ margin: "2em" }}>{children}</div>;
+  return <div style={{ margin: "1em" }}>{children}</div>;
 }