show amount nicely, into a component

7 files changed, 70 insertions, 62 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 (
diff --git a/packages/taler-wallet-webextension/src/cta/Pay.tsx b/packages/taler-wallet-webextension/src/cta/Pay.tsx
index 359625999..f2661308c 100644
--- a/packages/taler-wallet-webextension/src/cta/Pay.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Pay.tsx
@@ -29,6 +29,7 @@ import {
   AmountJson,
   AmountLike,
   Amounts,
+  AmountString,
   ConfirmPayResult,
   ConfirmPayResultDone,
   ConfirmPayResultType,
@@ -41,6 +42,7 @@ import {
 import { TalerError } from "@gnu-taler/taler-wallet-core";
 import { Fragment, h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
+import { Amount } from "../components/Amount.js";
 import { ErrorMessage } from "../components/ErrorMessage.js";
 import { Loading } from "../components/Loading.js";
 import { LoadingError } from "../components/LoadingError.js";
@@ -261,7 +263,7 @@ export function PaymentRequestView({
           <section>
             <ButtonSuccess upperCased onClick={onClick}>
               <i18n.Translate>
-                Pay {amountToString(payStatus.amountEffective)}
+                Pay {<Amount value={payStatus.amountEffective} />}
               </i18n.Translate>
             </ButtonSuccess>
           </section>
@@ -276,8 +278,8 @@ export function PaymentRequestView({
             {balance ? (
               <WarningBox>
                 <i18n.Translate>
-                  Your balance of {amountToString(balance)} is not enough to pay
-                  for this purchase
+                  Your balance of {<Amount value={balance} />} is not enough to
+                  pay for this purchase
                 </i18n.Translate>
               </WarningBox>
             ) : (
@@ -374,14 +376,14 @@ export function PaymentRequestView({
             <Part
               big
               title={<i18n.Translate>Total to pay</i18n.Translate>}
-              text={amountToString(payStatus.amountEffective)}
+              text={<Amount value={payStatus.amountEffective} />}
               kind="negative"
             />
           )}
         <Part
           big
           title={<i18n.Translate>Purchase amount</i18n.Translate>}
-          text={amountToString(payStatus.amountRaw)}
+          text={<Amount value={payStatus.amountRaw} />}
           kind="neutral"
         />
         {Amounts.isNonZero(totalFees) && (
@@ -389,7 +391,7 @@ export function PaymentRequestView({
             <Part
               big
               title={<i18n.Translate>Fee</i18n.Translate>}
-              text={amountToString(totalFees)}
+              text={<Amount value={totalFees} />}
               kind="negative"
             />
           </Fragment>
@@ -493,9 +495,3 @@ function ProductList({ products }: { products: Product[] }): VNode {
     </Fragment>
   );
 }
-
-function amountToString(text: AmountLike): string {
-  const aj = Amounts.jsonifyAmount(text);
-  const amount = Amounts.stringifyValue(aj, 2);
-  return `${amount} ${aj.currency}`;
-}
diff --git a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
index 3fbdadee4..a8c6b3c1a 100644
--- a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
@@ -85,7 +85,7 @@ export function ManualWithdrawPage({ currency, onCancel }: Props): VNode {
       <ReserveCreated
         reservePub={success.response.reservePub}
         paytoURI={success.paytoURI}
-        payto={success.payto}
+        // payto={success.payto}
         exchangeBaseUrl={success.exchangeBaseUrl}
         amount={success.amount}
         onCancel={onCancel}
diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx
index 4e5595ef6..587e24e98 100644
--- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx
@@ -19,6 +19,7 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
+import { parsePaytoUri } from "@gnu-taler/taler-util";
 import { createExample } from "../test-utils.js";
 import { ReserveCreated as TestedComponent } from "./ReserveCreated.js";
 
@@ -30,8 +31,9 @@ export default {
 
 export const TalerBank = createExample(TestedComponent, {
   reservePub: "A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG",
-  payto:
+  paytoURI: parsePaytoUri(
     "payto://x-taler-bank/bank.taler:5882/exchangeminator?amount=COL%3A1&message=Taler+Withdrawal+A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG",
+  ),
   amount: {
     currency: "USD",
     value: 10,
@@ -42,8 +44,9 @@ export const TalerBank = createExample(TestedComponent, {
 
 export const IBAN = createExample(TestedComponent, {
   reservePub: "A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG",
-  payto:
+  paytoURI: parsePaytoUri(
     "payto://iban/ASDQWEASDZXCASDQWE?amount=COL%3A1&message=Taler+Withdrawal+A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG",
+  ),
   amount: {
     currency: "USD",
     value: 10,
@@ -54,8 +57,9 @@ export const IBAN = createExample(TestedComponent, {
 
 export const Bitcoin = createExample(TestedComponent, {
   reservePub: "0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00",
-  payto:
+  paytoURI: parsePaytoUri(
     "payto://bitcoin/bc1qw508d6qejxtdg4y5r3zarvary0c5xw7kv8f3t4?amount=BTC:0.1&subject=0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00",
+  ),
   amount: {
     currency: "BTC",
     value: 0,
@@ -66,8 +70,9 @@ export const Bitcoin = createExample(TestedComponent, {
 
 export const BitcoinRegTest = createExample(TestedComponent, {
   reservePub: "0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00",
-  payto:
+  paytoURI: parsePaytoUri(
     "payto://bitcoin/bcrt1q6ps8qs6v8tkqrnru4xqqqa6rfwcx5ufpdfqht4?amount=BTC:0.1&subject=0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00",
+  ),
   amount: {
     currency: "BTC",
     value: 0,
@@ -77,8 +82,9 @@ export const BitcoinRegTest = createExample(TestedComponent, {
 });
 export const BitcoinTest = createExample(TestedComponent, {
   reservePub: "0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00",
-  payto:
+  paytoURI: parsePaytoUri(
     "payto://bitcoin/tb1qw508d6qejxtdg4y5r3zarvary0c5xw7kxpjzsx?amount=BTC:0.1&subject=0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00",
+  ),
   amount: {
     currency: "BTC",
     value: 0,
diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
index 50ab5175f..e656393ca 100644
--- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
@@ -3,9 +3,12 @@ import {
   Amounts,
   PaytoUri,
   segwitMinAmount,
+  stringifyPaytoUri,
 } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
+import { Amount } from "../components/Amount.js";
 import { BankDetailsByPaytoType } from "../components/BankDetailsByPaytoType.js";
+import { ErrorMessage } from "../components/ErrorMessage.js";
 import { QR } from "../components/QR.js";
 import {
   ButtonDestructive,
@@ -13,11 +16,9 @@ import {
   WarningBox,
 } from "../components/styled/index.js";
 import { useTranslationContext } from "../context/translation.js";
-import { amountToString } from "../utils/index.js";
 export interface Props {
   reservePub: string;
   paytoURI: PaytoUri | undefined;
-  payto: string;
   exchangeBaseUrl: string;
   amount: AmountJson;
   onCancel: () => void;
@@ -26,7 +27,6 @@ export interface Props {
 export function ReserveCreated({
   reservePub,
   paytoURI,
-  payto,
   onCancel,
   exchangeBaseUrl,
   amount,
@@ -34,11 +34,10 @@ export function ReserveCreated({
   const { i18n } = useTranslationContext();
   if (!paytoURI) {
     return (
-      <div>
-        <i18n.Translate>
-          could not parse payto uri from exchange {payto}
-        </i18n.Translate>
-      </div>
+      <ErrorMessage
+        title={<i18n.Translate>Could not parse the payto URI</i18n.Translate>}
+        description={<i18n.Translate>Please check the uri</i18n.Translate>}
+      />
     );
   }
   function TransferDetails(): VNode {
@@ -97,7 +96,7 @@ export function ReserveCreated({
     return (
       <section>
         <BankDetailsByPaytoType
-          amount={amountToString(amount)}
+          amount={<Amount value={amount} />}
           exchangeBaseUrl={exchangeBaseUrl}
           payto={paytoURI}
           subject={reservePub}
@@ -123,7 +122,7 @@ export function ReserveCreated({
         <p>
           <i18n.Translate>
             To complete the process you need to wire{` `}
-            <b>{amountToString(amount)}</b> to the exchange bank account
+            <b>{<Amount value={amount} />}</b> to the exchange bank account
           </i18n.Translate>
         </p>
       </section>
@@ -132,11 +131,11 @@ export function ReserveCreated({
         <p>
           <i18n.Translate>
             Alternative, you can also scan this QR code or open{" "}
-            <a href={payto}>this link</a> if you have a banking app installed
-            that supports RFC 8905
+            <a href={stringifyPaytoUri(paytoURI)}>this link</a> if you have a
+            banking app installed that supports RFC 8905
           </i18n.Translate>
         </p>
-        <QR text={payto} />
+        <QR text={stringifyPaytoUri(paytoURI)} />
       </section>
       <footer>
         <div />
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index 8fe6f9f32..62e40d029 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -28,6 +28,7 @@ import { differenceInSeconds } from "date-fns";
 import { ComponentChildren, Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import emptyImg from "../../static/img/empty.png";
+import { Amount } from "../components/Amount.js";
 import { BankDetailsByPaytoType } from "../components/BankDetailsByPaytoType.js";
 import { ErrorTalerOperation } from "../components/ErrorTalerOperation.js";
 import { Loading } from "../components/Loading.js";
@@ -180,12 +181,6 @@ export function TransactionView({
     );
   }
 
-  function amountToString(text: AmountLike): string {
-    const aj = Amounts.jsonifyAmount(text);
-    const amount = Amounts.stringifyValue(aj);
-    return `${amount} ${aj.currency}`;
-  }
-
   if (transaction.type === TransactionType.Withdrawal) {
     const fee = Amounts.sub(
       Amounts.parseOrThrow(transaction.amountRaw),
@@ -229,7 +224,7 @@ export function TransactionView({
           WithdrawalType.ManualTransfer ? (
             <Fragment>
               <BankDetailsByPaytoType
-                amount={amountToString(transaction.amountRaw)}
+                amount={<Amount value={transaction.amountRaw} />}
                 exchangeBaseUrl={transaction.exchangeBaseUrl}
                 payto={parsePaytoUri(
                   transaction.withdrawalDetails.exchangePaytoUris[0],
@@ -247,13 +242,13 @@ export function TransactionView({
               <Part
                 big
                 title={<i18n.Translate>Total withdrawn</i18n.Translate>}
-                text={amountToString(transaction.amountEffective)}
+                text={<Amount value={transaction.amountEffective} />}
                 kind="positive"
               />
               <Part
                 big
                 title={<i18n.Translate>Exchange fee</i18n.Translate>}
-                text={amountToString(fee)}
+                text={<Amount value={fee} />}
                 kind="negative"
               />
             </Fragment>
@@ -284,19 +279,19 @@ export function TransactionView({
               <Part
                 big
                 title={<i18n.Translate>Total withdrawn</i18n.Translate>}
-                text={amountToString(transaction.amountEffective)}
+                text={<Amount value={transaction.amountEffective} />}
                 kind="positive"
               />
               <Part
                 big
                 title={<i18n.Translate>Chosen amount</i18n.Translate>}
-                text={amountToString(transaction.amountRaw)}
+                text={<Amount value={transaction.amountRaw} />}
                 kind="neutral"
               />
               <Part
                 big
                 title={<i18n.Translate>Exchange fee</i18n.Translate>}
-                text={amountToString(fee)}
+                text={<Amount value={fee} />}
                 kind="negative"
               />
             </Fragment>
@@ -306,19 +301,19 @@ export function TransactionView({
             <Part
               big
               title={<i18n.Translate>Total withdrawn</i18n.Translate>}
-              text={amountToString(transaction.amountEffective)}
+              text={<Amount value={transaction.amountEffective} />}
               kind="positive"
             />
             <Part
               big
               title={<i18n.Translate>Chosen amount</i18n.Translate>}
-              text={amountToString(transaction.amountRaw)}
+              text={<Amount value={transaction.amountRaw} />}
               kind="neutral"
             />
             <Part
               big
               title={<i18n.Translate>Exchange fee</i18n.Translate>}
-              text={amountToString(fee)}
+              text={<Amount value={fee} />}
               kind="negative"
             />
           </Fragment>
@@ -355,19 +350,19 @@ export function TransactionView({
         <Part
           big
           title={<i18n.Translate>Total paid</i18n.Translate>}
-          text={amountToString(transaction.amountEffective)}
+          text={<Amount value={transaction.amountEffective} />}
           kind="negative"
         />
         <Part
           big
           title={<i18n.Translate>Purchase amount</i18n.Translate>}
-          text={amountToString(transaction.amountRaw)}
+          text={<Amount value={transaction.amountRaw} />}
           kind="neutral"
         />
         <Part
           big
           title={<i18n.Translate>Fee</i18n.Translate>}
-          text={amountToString(fee)}
+          text={<Amount value={fee} />}
           kind="negative"
         />
         <Part
@@ -441,19 +436,19 @@ export function TransactionView({
         <Part
           big
           title={<i18n.Translate>Total send</i18n.Translate>}
-          text={amountToString(transaction.amountEffective)}
+          text={<Amount value={transaction.amountEffective} />}
           kind="neutral"
         />
         <Part
           big
           title={<i18n.Translate>Deposit amount</i18n.Translate>}
-          text={amountToString(transaction.amountRaw)}
+          text={<Amount value={transaction.amountRaw} />}
           kind="positive"
         />
         <Part
           big
           title={<i18n.Translate>Fee</i18n.Translate>}
-          text={amountToString(fee)}
+          text={<Amount value={fee} />}
           kind="negative"
         />
       </TransactionTemplate>
@@ -478,19 +473,19 @@ export function TransactionView({
         <Part
           big
           title={<i18n.Translate>Total refresh</i18n.Translate>}
-          text={amountToString(transaction.amountEffective)}
+          text={<Amount value={transaction.amountEffective} />}
           kind="negative"
         />
         <Part
           big
           title={<i18n.Translate>Refresh amount</i18n.Translate>}
-          text={amountToString(transaction.amountRaw)}
+          text={<Amount value={transaction.amountRaw} />}
           kind="neutral"
         />
         <Part
           big
           title={<i18n.Translate>Fee</i18n.Translate>}
-          text={amountToString(fee)}
+          text={<Amount value={fee} />}
           kind="negative"
         />
       </TransactionTemplate>
@@ -515,19 +510,19 @@ export function TransactionView({
         <Part
           big
           title={<i18n.Translate>Total tip</i18n.Translate>}
-          text={amountToString(transaction.amountEffective)}
+          text={<Amount value={transaction.amountEffective} />}
           kind="positive"
         />
         <Part
           big
           title={<i18n.Translate>Received amount</i18n.Translate>}
-          text={amountToString(transaction.amountRaw)}
+          text={<Amount value={transaction.amountRaw} />}
           kind="neutral"
         />
         <Part
           big
           title={<i18n.Translate>Fee</i18n.Translate>}
-          text={amountToString(fee)}
+          text={<Amount value={fee} />}
           kind="negative"
         />
       </TransactionTemplate>
@@ -552,19 +547,19 @@ export function TransactionView({
         <Part
           big
           title={<i18n.Translate>Total refund</i18n.Translate>}
-          text={amountToString(transaction.amountEffective)}
+          text={<Amount value={transaction.amountEffective} />}
           kind="positive"
         />
         <Part
           big
           title={<i18n.Translate>Refund amount</i18n.Translate>}
-          text={amountToString(transaction.amountRaw)}
+          text={<Amount value={transaction.amountRaw} />}
           kind="neutral"
         />
         <Part
           big
           title={<i18n.Translate>Fee</i18n.Translate>}
-          text={amountToString(fee)}
+          text={<Amount value={fee} />}
           kind="negative"
         />
         <Part