1 files changed, 18 insertions, 0 deletions
diff --git a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
new file mode 100644
index 000000000..eaf015224
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
@@ -0,0 +1,18 @@
+import { useState } from "preact/hooks";
+import arrowDown from '../../static/img/chevron-down.svg';
+import { ErrorBox } from "./styled";
+
+export function ErrorMessage({ title, description }: { title?: string; description?: string; }) {
+  const [showErrorDetail, setShowErrorDetail] = useState(false);
+  if (!title)
+    return null;
+  return <ErrorBox>
+    <div>
+      <p>{title}</p>
+      { description && <button onClick={() => { setShowErrorDetail(v => !v); }}>
+        <img style={{ height: '1.5em' }} src={arrowDown} />
+      </button> }
+    </div>
+    {showErrorDetail && <p>{description}</p>}
+  </ErrorBox>;
+}