diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/components')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/ErrorMessage.tsx | 14 |
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> ); } |