better wording to the tx details

9 files changed, 143 insertions, 39 deletions

diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
index b6fd494fa..dd8abc509 100644
--- a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
+++ b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
@@ -65,6 +65,8 @@ export function BankDetailsByPaytoType({
   const payto = parsePaytoUri(firstPayto);
 
   if (!payto) return <Fragment />;
+  payto.params["amount"] = Amounts.stringify(amount);
+  payto.params["message"] = subject;
 
   if (payto.isKnown && payto.targetType === "bitcoin") {
     const min = segwitMinAmount(amount.currency);
diff --git a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx
index 18da2609c..b67bbb216 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx
@@ -31,7 +31,7 @@ import editIcon from "../../svg/edit_24px.inline.svg";
 import {
   ExchangeDetails,
   getAmountWithFee,
-  InvoiceDetails,
+  InvoiceCreationDetails,
 } from "../../wallet/Transaction.js";
 import { State } from "./index.js";
 
@@ -144,7 +144,7 @@ export function ReadyView({
         <Part
           title={i18n.str`Details`}
           text={
-            <InvoiceDetails
+            <InvoiceCreationDetails
               amount={getAmountWithFee(toBeReceived, requestAmount, "credit")}
             />
           }
diff --git a/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx b/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx
index 85923a2c5..e54e54bd1 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx
@@ -22,7 +22,10 @@ import { PaymentButtons } from "../../components/PaymentButtons.js";
 import { SubTitle, WalletAction } from "../../components/styled/index.js";
 import { Time } from "../../components/Time.js";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
-import { getAmountWithFee, InvoiceDetails } from "../../wallet/Transaction.js";
+import {
+  getAmountWithFee,
+  InvoicePaymentDetails,
+} from "../../wallet/Transaction.js";
 import { State } from "./index.js";
 
 export function ReadyView(
@@ -38,7 +41,7 @@ export function ReadyView(
         <Part
           title={i18n.str`Details`}
           text={
-            <InvoiceDetails
+            <InvoicePaymentDetails
               amount={getAmountWithFee(effective, raw, "debit")}
             />
           }
diff --git a/packages/taler-wallet-webextension/src/cta/Payment/views.tsx b/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
index 764036dad..b0911cb2f 100644
--- a/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
@@ -104,7 +104,7 @@ export function BaseView(state: SupportedStates): VNode {
         )}
       </section>
       <PaymentButtons
-        amount={state.amount}
+        amount={effective}
         payStatus={state.payStatus}
         uri={state.uri}
         payHandler={state.status === "ready" ? state.payHandler : undefined}
diff --git a/packages/taler-wallet-webextension/src/cta/TransferCreate/state.ts b/packages/taler-wallet-webextension/src/cta/TransferCreate/state.ts
index edd823181..80b8a01bd 100644
--- a/packages/taler-wallet-webextension/src/cta/TransferCreate/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/TransferCreate/state.ts
@@ -67,8 +67,8 @@ export function useComponentState({
   // }
 
   const { amountEffective, amountRaw } = hook.response;
-  const debitAmount = Amounts.parseOrThrow(amountRaw);
-  const toBeReceived = Amounts.parseOrThrow(amountEffective);
+  const debitAmount = Amounts.parseOrThrow(amountEffective);
+  const toBeReceived = Amounts.parseOrThrow(amountRaw);
 
   let purse_expiration: TalerProtocolTimestamp | undefined = undefined;
   let timestampError: string | undefined = undefined;
diff --git a/packages/taler-wallet-webextension/src/cta/TransferCreate/views.tsx b/packages/taler-wallet-webextension/src/cta/TransferCreate/views.tsx
index 8fe88025f..8489b0643 100644
--- a/packages/taler-wallet-webextension/src/cta/TransferCreate/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/TransferCreate/views.tsx
@@ -14,17 +14,16 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { Amounts } from "@gnu-taler/taler-util";
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { format } from "date-fns";
 import { Fragment, h, VNode } from "preact";
-import { ErrorTalerOperation } from "../../components/ErrorTalerOperation.js";
-import { LogoHeader } from "../../components/LogoHeader.js";
 import { Part } from "../../components/Part.js";
-import { Link, SubTitle, WalletAction } from "../../components/styled/index.js";
-import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Button } from "../../mui/Button.js";
 import { TextField } from "../../mui/TextField.js";
-import { getAmountWithFee, TransferDetails } from "../../wallet/Transaction.js";
+import {
+  getAmountWithFee,
+  TransferCreationDetails,
+} from "../../wallet/Transaction.js";
 import { State } from "./index.js";
 
 export function ReadyView({
@@ -110,7 +109,7 @@ export function ReadyView({
         <Part
           title={i18n.str`Details`}
           text={
-            <TransferDetails
+            <TransferCreationDetails
               amount={getAmountWithFee(debitAmount, toBeReceived, "debit")}
             />
           }
diff --git a/packages/taler-wallet-webextension/src/cta/TransferPickup/views.tsx b/packages/taler-wallet-webextension/src/cta/TransferPickup/views.tsx
index 189554a49..5dce2ce22 100644
--- a/packages/taler-wallet-webextension/src/cta/TransferPickup/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/TransferPickup/views.tsx
@@ -14,16 +14,16 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Fragment, h, VNode } from "preact";
 import { Amount } from "../../components/Amount.js";
-import { ErrorTalerOperation } from "../../components/ErrorTalerOperation.js";
-import { LogoHeader } from "../../components/LogoHeader.js";
 import { Part } from "../../components/Part.js";
-import { Link, SubTitle, WalletAction } from "../../components/styled/index.js";
 import { Time } from "../../components/Time.js";
-import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Button } from "../../mui/Button.js";
-import { getAmountWithFee, TransferDetails } from "../../wallet/Transaction.js";
+import {
+  getAmountWithFee,
+  TransferPickupDetails,
+} from "../../wallet/Transaction.js";
 import { State } from "./index.js";
 
 export function ReadyView({
@@ -42,7 +42,7 @@ export function ReadyView({
         <Part
           title={i18n.str`Details`}
           text={
-            <TransferDetails
+            <TransferPickupDetails
               amount={getAmountWithFee(effective, raw, "credit")}
             />
           }
diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx
index a16590fe8..900218991 100644
--- a/packages/taler-wallet-webextension/src/wallet/History.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/History.tsx
@@ -152,16 +152,20 @@ export function HistoryView({
       ? []
       : transactionByCurrency[selectedCurrency] ?? [];
 
+  const datesWithTransaction: string[] = [];
   const byDate = ts.reduce((rv, x) => {
     const theDate =
       x.timestamp.t_s === "never" ? 0 : normalizeToDay(x.timestamp.t_s * 1000);
     if (theDate) {
-      (rv[theDate] = rv[theDate] || []).push(x);
+      if (!rv[theDate]) {
+        rv[theDate] = [];
+        datesWithTransaction.push(String(theDate));
+      }
+      rv[theDate].push(x);
     }
 
     return rv;
   }, {} as { [x: string]: Transaction[] });
-  const datesWithTransaction = Object.keys(byDate);
 
   if (balances.length === 0 || !selectedCurrency) {
     return (
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index 13adb34b2..17a921b54 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -876,7 +876,7 @@ export function TransactionView({
         <Part
           title={i18n.str`Details`}
           text={
-            <InvoiceDetails
+            <InvoiceCreationDetails
               amount={getAmountWithFee(effective, raw, "credit")}
             />
           }
@@ -920,7 +920,7 @@ export function TransactionView({
         <Part
           title={i18n.str`Details`}
           text={
-            <InvoiceDetails
+            <InvoicePaymentDetails
               amount={getAmountWithFee(effective, raw, "debit")}
             />
           }
@@ -972,7 +972,7 @@ export function TransactionView({
         <Part
           title={i18n.str`Details`}
           text={
-            <TransferDetails
+            <TransferCreationDetails
               amount={getAmountWithFee(effective, raw, "debit")}
             />
           }
@@ -1016,7 +1016,7 @@ export function TransactionView({
         <Part
           title={i18n.str`Details`}
           text={
-            <TransferDetails
+            <TransferPickupDetails
               amount={getAmountWithFee(effective, raw, "credit")}
             />
           }
@@ -1212,24 +1212,27 @@ export function getAmountWithFee(
   raw: AmountJson,
   direction: "credit" | "debit",
 ): AmountWithFee {
-  const fee =
-    direction === "credit"
-      ? Amounts.sub(raw, effective).amount
-      : Amounts.sub(effective, raw).amount;
+  const total = direction === "credit" ? effective : raw;
+  const value = direction === "debit" ? effective : raw;
+  const fee = Amounts.sub(value, total).amount;
 
   const maxFrac = [effective, raw, fee]
     .map((a) => Amounts.maxFractionalDigits(a))
     .reduce((c, p) => Math.max(c, p), 0);
 
   return {
-    total: effective,
-    value: raw,
+    total,
+    value,
     fee,
     maxFrac,
   };
 }
 
-export function InvoiceDetails({ amount }: { amount: AmountWithFee }): VNode {
+export function InvoiceCreationDetails({
+  amount,
+}: {
+  amount: AmountWithFee;
+}): VNode {
   const { i18n } = useTranslationContext();
 
   return (
@@ -1270,7 +1273,101 @@ export function InvoiceDetails({ amount }: { amount: AmountWithFee }): VNode {
   );
 }
 
-export function TransferDetails({ amount }: { amount: AmountWithFee }): VNode {
+export function InvoicePaymentDetails({
+  amount,
+}: {
+  amount: AmountWithFee;
+}): VNode {
+  const { i18n } = useTranslationContext();
+
+  return (
+    <PurchaseDetailsTable>
+      <tr>
+        <td>
+          <i18n.Translate>Invoice</i18n.Translate>
+        </td>
+        <td>
+          <Amount value={amount.total} maxFracSize={amount.maxFrac} />
+        </td>
+      </tr>
+
+      {Amounts.isNonZero(amount.fee) && (
+        <tr>
+          <td>
+            <i18n.Translate>Fees</i18n.Translate>
+          </td>
+          <td>
+            <Amount value={amount.fee} maxFracSize={amount.maxFrac} />
+          </td>
+        </tr>
+      )}
+      <tr>
+        <td colSpan={2}>
+          <hr />
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <i18n.Translate>Total</i18n.Translate>
+        </td>
+        <td>
+          <Amount value={amount.value} maxFracSize={amount.maxFrac} />
+        </td>
+      </tr>
+    </PurchaseDetailsTable>
+  );
+}
+
+export function TransferCreationDetails({
+  amount,
+}: {
+  amount: AmountWithFee;
+}): VNode {
+  const { i18n } = useTranslationContext();
+
+  return (
+    <PurchaseDetailsTable>
+      <tr>
+        <td>
+          <i18n.Translate>Sent</i18n.Translate>
+        </td>
+        <td>
+          <Amount value={amount.value} maxFracSize={amount.maxFrac} />
+        </td>
+      </tr>
+
+      {Amounts.isNonZero(amount.fee) && (
+        <tr>
+          <td>
+            <i18n.Translate>Fees</i18n.Translate>
+          </td>
+          <td>
+            <Amount value={amount.fee} maxFracSize={amount.maxFrac} />
+          </td>
+        </tr>
+      )}
+      <tr>
+        <td colSpan={2}>
+          <hr />
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <i18n.Translate>Transfer</i18n.Translate>
+        </td>
+        <td>
+          <Amount value={amount.total} maxFracSize={amount.maxFrac} />
+        </td>
+      </tr>
+    </PurchaseDetailsTable>
+  );
+}
+
+export function TransferPickupDetails({
+  amount,
+}: {
+  amount: AmountWithFee;
+}): VNode {
   const { i18n } = useTranslationContext();
 
   return (
@@ -1310,7 +1407,6 @@ export function TransferDetails({ amount }: { amount: AmountWithFee }): VNode {
     </PurchaseDetailsTable>
   );
 }
-
 export function WithdrawDetails({ amount }: { amount: AmountWithFee }): VNode {
   const { i18n } = useTranslationContext();
 
@@ -1324,7 +1420,7 @@ export function WithdrawDetails({ amount }: { amount: AmountWithFee }): VNode {
     <PurchaseDetailsTable>
       <tr>
         <td>
-          <i18n.Translate>Wire transfer</i18n.Translate>
+          <i18n.Translate>Transfer</i18n.Translate>
         </td>
         <td>
           <Amount value={amount.value} maxFracSize={amount.maxFrac} />
@@ -1389,7 +1485,7 @@ export function PurchaseDetails({
           <i18n.Translate>Price</i18n.Translate>
         </td>
         <td>
-          <Amount value={price.value} />
+          <Amount value={price.total} />
         </td>
       </tr>
       {Amounts.isNonZero(price.fee) && (
@@ -1451,7 +1547,7 @@ export function PurchaseDetails({
               <i18n.Translate>Total</i18n.Translate>
             </td>
             <td>
-              <Amount value={price.total} />
+              <Amount value={price.value} />
             </td>
           </tr>
         </Fragment>
@@ -1621,7 +1717,7 @@ function DepositDetails({ amount }: { amount: AmountWithFee }): VNode {
     <PurchaseDetailsTable>
       <tr>
         <td>
-          <i18n.Translate>Deposit</i18n.Translate>
+          <i18n.Translate>Sent</i18n.Translate>
         </td>
         <td>
           <Amount value={amount.value} maxFracSize={amount.maxFrac} />