format amount so it is align to fractional digitls

4 files changed, 67 insertions, 40 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx b/packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx
index 04f7515e8..250df7426 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx
@@ -78,7 +78,11 @@ export const WithSomeBankAccounts = createExample(TestedComponent, {
       value: "10:USD",
     },
     cancelHandler: {},
-    depositHandler: {},
+    depositHandler: {
+      onClick: async () => {
+        return;
+      },
+    },
     totalFee: Amounts.getZero("USD"),
     totalToDeposit: Amounts.parseOrThrow("USD:10"),
     // onCalculateFee: alwaysReturnFeeToOne,
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx
index a0dbcb3c0..290c5ca24 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx
@@ -18,6 +18,7 @@ import { AmountJson, Amounts, PaytoUri } from "@gnu-taler/taler-util";
 import { DepositGroupFees } from "@gnu-taler/taler-wallet-core/src/operations/deposits";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
+import { Amount } from "../components/Amount.js";
 import { Loading } from "../components/Loading.js";
 import { LoadingError } from "../components/LoadingError.js";
 import { SelectList } from "../components/SelectList.js";
@@ -361,7 +362,7 @@ export function View({ state }: ViewProps): VNode {
         ) : (
           <Button variant="contained" onClick={state.depositHandler.onClick}>
             <i18n.Translate>
-              Deposit {Amounts.stringifyValue(state.totalToDeposit)}{" "}
+              Deposit&nbsp;{Amounts.stringifyValue(state.totalToDeposit)}{" "}
               {state.currency}
             </i18n.Translate>
           </Button>
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
index b49d6cfe7..ae43a7b09 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
@@ -428,6 +428,8 @@ export const DepositTalerBank = createExample(TestedComponent, {
 export const DepositBitcoin = createExample(TestedComponent, {
   transaction: {
     ...exampleData.deposit,
+    amountRaw: "BITCOINBTC:0.0000011",
+    amountEffective: "BITCOINBTC:0.00000092",  
     targetPaytoUri:
       "payto://bitcoin/bcrt1q6ps8qs6v8tkqrnru4xqqqa6rfwcx5ufpdfqht4?amount=BTC:0.1&subject=0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00",
   },
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index d1cb72a78..1f195a2bf 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -16,6 +16,7 @@
 
 import {
   AbsoluteTime,
+  amountFractionalLength,
   AmountJson,
   Amounts,
   Location,
@@ -749,7 +750,7 @@ function PurchaseDetails({
         <tr>
           <td>Refunded</td>
           <td>
-            <Amount value={transaction.totalRefundRaw} />
+            <Amount value={transaction.totalRefundRaw} negative />
           </td>
         </tr>
       )}
@@ -828,17 +829,20 @@ function RefundDetails({
 }): VNode {
   const { i18n } = useTranslationContext();
 
-  const fee = Amounts.sub(
-    Amounts.parseOrThrow(transaction.amountRaw),
-    Amounts.parseOrThrow(transaction.amountEffective),
-  ).amount;
+  const r = Amounts.parseOrThrow(transaction.amountRaw);
+  const e = Amounts.parseOrThrow(transaction.amountEffective);
+  const fee = Amounts.sub(r, e).amount;
+
+  const maxFrac = [r, e, fee]
+    .map((a) => Amounts.maxFractionalDigits(a))
+    .reduce((c, p) => Math.max(c, p), 0);
 
   return (
     <PurchaseDetailsTable>
       <tr>
         <td>Amount</td>
         <td>
-          <Amount value={transaction.amountRaw} />
+          <Amount value={transaction.amountRaw} maxFracSize={maxFrac} />
         </td>
       </tr>
 
@@ -846,7 +850,7 @@ function RefundDetails({
         <tr>
           <td>Transaction fees</td>
           <td>
-            <Amount value={fee} />
+            <Amount value={fee} negative maxFracSize={maxFrac} />
           </td>
         </tr>
       )}
@@ -858,7 +862,7 @@ function RefundDetails({
       <tr>
         <td>Total</td>
         <td>
-          <Amount value={transaction.amountEffective} />
+          <Amount value={transaction.amountEffective} maxFracSize={maxFrac} />
         </td>
       </tr>
     </PurchaseDetailsTable>
@@ -871,18 +875,20 @@ function DepositDetails({
   transaction: TransactionDeposit;
 }): VNode {
   const { i18n } = useTranslationContext();
+  const r = Amounts.parseOrThrow(transaction.amountRaw);
+  const e = Amounts.parseOrThrow(transaction.amountEffective);
+  const fee = Amounts.sub(r, e).amount;
 
-  const fee = Amounts.sub(
-    Amounts.parseOrThrow(transaction.amountRaw),
-    Amounts.parseOrThrow(transaction.amountEffective),
-  ).amount;
+  const maxFrac = [r, e, fee]
+    .map((a) => Amounts.maxFractionalDigits(a))
+    .reduce((c, p) => Math.max(c, p), 0);
 
   return (
     <PurchaseDetailsTable>
       <tr>
         <td>Amount</td>
         <td>
-          <Amount value={transaction.amountRaw} />
+          <Amount value={transaction.amountRaw} maxFracSize={maxFrac} />
         </td>
       </tr>
 
@@ -890,7 +896,7 @@ function DepositDetails({
         <tr>
           <td>Transaction fees</td>
           <td>
-            <Amount value={fee} />
+            <Amount value={fee} negative maxFracSize={maxFrac} />
           </td>
         </tr>
       )}
@@ -902,7 +908,7 @@ function DepositDetails({
       <tr>
         <td>Total transfer</td>
         <td>
-          <Amount value={transaction.amountEffective} />
+          <Amount value={transaction.amountEffective} maxFracSize={maxFrac} />
         </td>
       </tr>
     </PurchaseDetailsTable>
@@ -915,17 +921,26 @@ function RefreshDetails({
 }): VNode {
   const { i18n } = useTranslationContext();
 
-  const fee = Amounts.sub(
-    Amounts.parseOrThrow(transaction.amountRaw),
-    Amounts.parseOrThrow(transaction.amountEffective),
-  ).amount;
+  const r = Amounts.parseOrThrow(transaction.amountRaw);
+  const e = Amounts.parseOrThrow(transaction.amountEffective);
+  const fee = Amounts.sub(r, e).amount;
+
+  const maxFrac = [r, e, fee]
+    .map((a) => Amounts.maxFractionalDigits(a))
+    .reduce((c, p) => Math.max(c, p), 0);
 
   return (
     <PurchaseDetailsTable>
       <tr>
         <td>Amount</td>
         <td>
-          <Amount value={transaction.amountRaw} />
+          <Amount value={transaction.amountRaw} maxFracSize={maxFrac} />
+        </td>
+      </tr>
+      <tr>
+        <td>Transaction fees</td>
+        <td>
+          <Amount value={fee} negative maxFracSize={maxFrac} />
         </td>
       </tr>
       <tr>
@@ -934,9 +949,9 @@ function RefreshDetails({
         </td>
       </tr>
       <tr>
-        <td>Transaction fees</td>
+        <td>Total</td>
         <td>
-          <Amount value={fee} />
+          <Amount value={transaction.amountEffective} maxFracSize={maxFrac} />
         </td>
       </tr>
     </PurchaseDetailsTable>
@@ -946,17 +961,20 @@ function RefreshDetails({
 function TipDetails({ transaction }: { transaction: TransactionTip }): VNode {
   const { i18n } = useTranslationContext();
 
-  const fee = Amounts.sub(
-    Amounts.parseOrThrow(transaction.amountRaw),
-    Amounts.parseOrThrow(transaction.amountEffective),
-  ).amount;
+  const r = Amounts.parseOrThrow(transaction.amountRaw);
+  const e = Amounts.parseOrThrow(transaction.amountEffective);
+  const fee = Amounts.sub(r, e).amount;
+
+  const maxFrac = [r, e, fee]
+    .map((a) => Amounts.maxFractionalDigits(a))
+    .reduce((c, p) => Math.max(c, p), 0);
 
   return (
     <PurchaseDetailsTable>
       <tr>
         <td>Amount</td>
         <td>
-          <Amount value={transaction.amountRaw} />
+          <Amount value={transaction.amountRaw} maxFracSize={maxFrac} />
         </td>
       </tr>
 
@@ -964,7 +982,7 @@ function TipDetails({ transaction }: { transaction: TransactionTip }): VNode {
         <tr>
           <td>Transaction fees</td>
           <td>
-            <Amount value={fee} />
+            <Amount value={fee} negative maxFracSize={maxFrac} />
           </td>
         </tr>
       )}
@@ -976,7 +994,7 @@ function TipDetails({ transaction }: { transaction: TransactionTip }): VNode {
       <tr>
         <td>Total</td>
         <td>
-          <Amount value={transaction.amountEffective} />
+          <Amount value={transaction.amountEffective} maxFracSize={maxFrac} />
         </td>
       </tr>
     </PurchaseDetailsTable>
@@ -990,17 +1008,20 @@ function WithdrawDetails({
 }): VNode {
   const { i18n } = useTranslationContext();
 
-  const fee = Amounts.sub(
-    Amounts.parseOrThrow(transaction.amountRaw),
-    Amounts.parseOrThrow(transaction.amountEffective),
-  ).amount;
+  const r = Amounts.parseOrThrow(transaction.amountRaw);
+  const e = Amounts.parseOrThrow(transaction.amountEffective);
+  const fee = Amounts.sub(r, e).amount;
+
+  const maxFrac = [r, e, fee]
+    .map((a) => Amounts.maxFractionalDigits(a))
+    .reduce((c, p) => Math.max(c, p), 0);
 
   return (
     <PurchaseDetailsTable>
       <tr>
         <td>Withdraw</td>
         <td>
-          <Amount value={transaction.amountRaw} />
+          <Amount value={transaction.amountRaw} maxFracSize={maxFrac} />
         </td>
       </tr>
 
@@ -1008,7 +1029,7 @@ function WithdrawDetails({
         <tr>
           <td>Transaction fees</td>
           <td>
-            <Amount value={fee} />
+            <Amount value={fee} negative maxFracSize={maxFrac} />
           </td>
         </tr>
       )}
@@ -1020,7 +1041,7 @@ function WithdrawDetails({
       <tr>
         <td>Total</td>
         <td>
-          <Amount value={transaction.amountEffective} />
+          <Amount value={transaction.amountEffective} maxFracSize={maxFrac} />
         </td>
       </tr>
     </PurchaseDetailsTable>
@@ -1059,9 +1080,8 @@ function Header({
         <SubTitle>
           <Part
             title={type}
-            text={<Amount value={total} />}
+            text={<Amount value={total} negative={kind === "negative"} />}
             kind={kind}
-            showSign
           />
         </SubTitle>
       </div>