all the browser related code move into one place, making it easy for specific platform code or mocking for testing

2 files changed, 58 insertions, 5 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/Refund.tsx b/packages/taler-wallet-webextension/src/cta/Refund.tsx
index efc436bc8..790e8d9fa 100644
--- a/packages/taler-wallet-webextension/src/cta/Refund.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Refund.tsx
@@ -20,11 +20,15 @@
  * @author sebasjm
  */
 
-import { Amounts, ApplyRefundResponse } from "@gnu-taler/taler-util";
+import {
+  amountFractionalBase,
+  AmountJson,
+  Amounts,
+  ApplyRefundResponse,
+} from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
 import { useTranslationContext } from "../context/translation";
-import { AmountView } from "../renderHtml";
 import * as wxApi from "../wxApi";
 
 interface Props {
@@ -120,3 +124,27 @@ export function RefundPage({ talerRefundUri }: Props): VNode {
 
   return <View applyResult={applyResult} />;
 }
+
+export function renderAmount(amount: AmountJson | string): VNode {
+  let a;
+  if (typeof amount === "string") {
+    a = Amounts.parse(amount);
+  } else {
+    a = amount;
+  }
+  if (!a) {
+    return <span>(invalid amount)</span>;
+  }
+  const x = a.value + a.fraction / amountFractionalBase;
+  return (
+    <span>
+      {x}&nbsp;{a.currency}
+    </span>
+  );
+}
+
+export const AmountView = ({
+  amount,
+}: {
+  amount: AmountJson | string;
+}): VNode => renderAmount(amount);
diff --git a/packages/taler-wallet-webextension/src/cta/Tip.tsx b/packages/taler-wallet-webextension/src/cta/Tip.tsx
index 71aa04a2b..5767b5008 100644
--- a/packages/taler-wallet-webextension/src/cta/Tip.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Tip.tsx
@@ -17,15 +17,19 @@
 /**
  * Page shown to the user to accept or ignore a tip from a merchant.
  *
- * @author sebasjm <dold@taler.net>
+ * @author sebasjm
  */
 
-import { PrepareTipResult } from "@gnu-taler/taler-util";
+import {
+  amountFractionalBase,
+  AmountJson,
+  Amounts,
+  PrepareTipResult,
+} from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
 import { Loading } from "../components/Loading";
 import { useTranslationContext } from "../context/translation";
-import { AmountView } from "../renderHtml";
 import * as wxApi from "../wxApi";
 
 interface Props {
@@ -136,3 +140,24 @@ export function TipPage({ talerTipUri }: Props): VNode {
     />
   );
 }
+
+function renderAmount(amount: AmountJson | string): VNode {
+  let a;
+  if (typeof amount === "string") {
+    a = Amounts.parse(amount);
+  } else {
+    a = amount;
+  }
+  if (!a) {
+    return <span>(invalid amount)</span>;
+  }
+  const x = a.value + a.fraction / amountFractionalBase;
+  return (
+    <span>
+      {x}&nbsp;{a.currency}
+    </span>
+  );
+}
+
+const AmountView = ({ amount }: { amount: AmountJson | string }): VNode =>
+  renderAmount(amount);