show amount nicely, into a component

2 files changed, 13 insertions, 1 deletions

diff --git a/packages/taler-wallet-webextension/src/components/Amount.tsx b/packages/taler-wallet-webextension/src/components/Amount.tsx
new file mode 100644
index 000000000..c41f7faf6
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/components/Amount.tsx
@@ -0,0 +1,12 @@
+import { AmountJson, Amounts, AmountString } from "@gnu-taler/taler-util";
+import { h, VNode, Fragment } from "preact";
+
+export function Amount({ value }: { value: AmountJson | AmountString }): VNode {
+  const aj = Amounts.jsonifyAmount(value);
+  const amount = Amounts.stringifyValue(aj, 2);
+  return (
+    <Fragment>
+      {amount} {aj.currency}
+    </Fragment>
+  );
+}
diff --git a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
index f6e2ba2cf..7b62a7355 100644
--- a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
+++ b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
@@ -23,7 +23,7 @@ export function ErrorMessage({
   description,
 }: {
   title: VNode;
-  description?: string;
+  description?: string | VNode;
 }): VNode | null {
   const [showErrorDetail, setShowErrorDetail] = useState(false);
   return (