actually display fees instead of effective amount

packages/taler-wallet-webextension/src/pages/pay.tsx

@@ -35,7 +35,6 @@ import {
   PreparePayResult,
   PreparePayResultType,
   ContractTerms,
-  codecForContractTerms,
   ConfirmPayResultType,
   ConfirmPayResult,
   getJsonI18n,
@@ -47,7 +46,7 @@ function TalerPayDialog({ talerPayUri }: { talerPayUri: string }): JSX.Element {
   const [payErrMsg, setPayErrMsg] = useState<string | undefined>("");
   const [numTries, setNumTries] = useState(0);
   const [loading, setLoading] = useState(false);
-  let amountEffective: AmountJson | undefined = undefined;
+  let totalFees: AmountJson | undefined = undefined;
 
   useEffect(() => {
     const doFetch = async (): Promise<void> => {
@@ -67,7 +66,9 @@ function TalerPayDialog({ talerPayUri }: { talerPayUri: string }): JSX.Element {
   }
 
   if (payStatus.status === PreparePayResultType.PaymentPossible) {
-    amountEffective = Amounts.parseOrThrow(payStatus.amountEffective);
+    let amountRaw = Amounts.parseOrThrow(payStatus.amountRaw);
+    let amountEffective: AmountJson = Amounts.parseOrThrow(payStatus.amountEffective);
+    totalFees = Amounts.sub(amountEffective, amountRaw).amount;
   }
 
   if (
@@ -161,10 +162,10 @@ function TalerPayDialog({ talerPayUri }: { talerPayUri: string }): JSX.Element {
         <div style={{ textAlign: "center" }}>
           <strong>{contractTerms.summary}</strong>
         </div>
-        {amountEffective ? (
+        {totalFees ? (
           <i18n.Translate wrap="p">
             The total price is <span>{amount} </span>
-            (plus <span>{renderAmount(amountEffective)}</span> fees).
+            (plus <span>{renderAmount(totalFees)}</span> fees).
           </i18n.Translate>
         ) : (
           <i18n.Translate wrap="p">

packages/taler-wallet-webextension/src/pages/withdraw.tsx

@@ -34,9 +34,7 @@ import {
 import { WithdrawUriInfoResponse } from "taler-wallet-core";
 
 function WithdrawalDialog(props: { talerWithdrawUri: string }): JSX.Element {
-  const [details, setDetails] = useState<
+  const [details, setDetails] = useState<WithdrawUriInfoResponse | undefined>();
-    WithdrawUriInfoResponse | undefined
-  >();
   const [selectedExchange, setSelectedExchange] = useState<
     string | undefined
   >();
@@ -55,7 +53,9 @@ function WithdrawalDialog(props: { talerWithdrawUri: string }): JSX.Element {
 
   useEffect(() => {
     const fetchData = async (): Promise<void> => {
-      const res = await getWithdrawalDetailsForUri({talerWithdrawUri: props.talerWithdrawUri});
+      const res = await getWithdrawalDetailsForUri({
+        talerWithdrawUri: props.talerWithdrawUri,
+      });
       setDetails(res);
       if (res.defaultExchangeBaseUrl) {
         setSelectedExchange(res.defaultExchangeBaseUrl);
@@ -89,8 +89,8 @@ function WithdrawalDialog(props: { talerWithdrawUri: string }): JSX.Element {
       <h1>Digital Cash Withdrawal</h1>
       <i18n.Translate wrap="p">
         You are about to withdraw{" "}
-        <strong>{renderAmount(details.amount)}</strong> from
+        <strong>{renderAmount(details.amount)}</strong> from your bank account
-        your bank account into your wallet.
+        into your wallet.
       </i18n.Translate>
       {selectedExchange ? (
         <p>