1 files changed, 14 insertions, 3 deletions
diff --git a/packages/taler-wallet-webextension/src/cta/TransferPickup/views.tsx b/packages/taler-wallet-webextension/src/cta/TransferPickup/views.tsx
index 25f5cdf52..b7ba3ea26 100644
--- a/packages/taler-wallet-webextension/src/cta/TransferPickup/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/TransferPickup/views.tsx
@@ -23,13 +23,15 @@ import { Link, SubTitle, WalletAction } from "../../components/styled/index.js";
 import { Time } from "../../components/Time.js";
 import { useTranslationContext } from "../../context/translation.js";
 import { Button } from "../../mui/Button.js";
+import { getAmountWithFee, TransferDetails } from "../../wallet/Transaction.js";
 import { State } from "./index.js";
 
 export function ReadyView({
   accept,
   summary,
   expiration,
-  amount,
+  effective,
+  raw,
 }: State.Ready): VNode {
   const { i18n } = useTranslationContext();
   return (
@@ -40,7 +42,16 @@ export function ReadyView({
       </SubTitle>
       <section style={{ textAlign: "left" }}>
         <Part title={i18n.str`Subject`} text={<div>{summary}</div>} />
-        <Part title={i18n.str`Amount`} text={<Amount value={amount} />} />
+        <Part title={i18n.str`Amount`} text={<Amount value={raw} />} />
+        <Part
+          title={i18n.str`Details`}
+          text={
+            <TransferDetails
+              amount={getAmountWithFee(effective, raw, "credit")}
+            />
+          }
+        />
+
         <Part
           title={i18n.str`Valid until`}
           text={<Time timestamp={expiration} format="dd MMMM yyyy, HH:mm" />}
@@ -50,7 +61,7 @@ export function ReadyView({
       <section>
         <Button variant="contained" color="success" onClick={accept.onClick}>
           <i18n.Translate>
-            Receive &nbsp; {<Amount value={amount} />}
+            Receive &nbsp; {<Amount value={effective} />}
           </i18n.Translate>
         </Button>
       </section>