show wire details when the deposit has been wired

2 files changed, 106 insertions, 16 deletions

diff --git a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
index 934a0fe52..7ddaee9f3 100644
--- a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
+++ b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
@@ -76,7 +76,11 @@ export function TransactionItem(props: { tx: Transaction }): VNode {
           subtitle={tx.info.summary}
           timestamp={AbsoluteTime.fromTimestamp(tx.timestamp)}
           iconPath={"P"}
-          // pending={tx.pending}
+          pending={
+            tx.extendedStatus === ExtendedStatus.Pending
+              ? i18n.str`Payment in progress`
+              : undefined
+          }
         />
       );
     case TransactionType.Refund:
@@ -89,7 +93,11 @@ export function TransactionItem(props: { tx: Transaction }): VNode {
           title={tx.info.merchant.name}
           timestamp={AbsoluteTime.fromTimestamp(tx.timestamp)}
           iconPath={"R"}
-          // pending={tx.pending}
+          pending={
+            tx.extendedStatus === ExtendedStatus.Pending
+              ? i18n.str`Executing refund...`
+              : undefined
+          }
         />
       );
     case TransactionType.Tip:
@@ -101,7 +109,11 @@ export function TransactionItem(props: { tx: Transaction }): VNode {
           title={new URL(tx.merchantBaseUrl).hostname}
           timestamp={AbsoluteTime.fromTimestamp(tx.timestamp)}
           iconPath={"T"}
-          // pending={tx.pending}
+          pending={
+            tx.extendedStatus === ExtendedStatus.Pending
+              ? i18n.str`Grabbing the tipping...`
+              : undefined
+          }
         />
       );
     case TransactionType.Refresh:
@@ -113,7 +125,11 @@ export function TransactionItem(props: { tx: Transaction }): VNode {
           title={"Refresh"}
           timestamp={AbsoluteTime.fromTimestamp(tx.timestamp)}
           iconPath={"R"}
-          // pending={tx.pending}
+          pending={
+            tx.extendedStatus === ExtendedStatus.Pending
+              ? i18n.str`Refreshing coins...`
+              : undefined
+          }
         />
       );
     case TransactionType.Deposit:
@@ -125,7 +141,11 @@ export function TransactionItem(props: { tx: Transaction }): VNode {
           title={tx.targetPaytoUri}
           timestamp={AbsoluteTime.fromTimestamp(tx.timestamp)}
           iconPath={"D"}
-          // pending={tx.pending}
+          pending={
+            tx.extendedStatus === ExtendedStatus.Pending
+              ? i18n.str`Deposit in progress`
+              : undefined
+          }
         />
       );
     case TransactionType.PeerPullCredit:
@@ -137,7 +157,11 @@ export function TransactionItem(props: { tx: Transaction }): VNode {
           title={tx.info.summary || "Invoice"}
           timestamp={AbsoluteTime.fromTimestamp(tx.timestamp)}
           iconPath={"I"}
-          // pending={tx.pending}
+          pending={
+            tx.extendedStatus === ExtendedStatus.Pending
+              ? i18n.str`Waiting to be paid`
+              : undefined
+          }
         />
       );
     case TransactionType.PeerPullDebit:
@@ -149,7 +173,11 @@ export function TransactionItem(props: { tx: Transaction }): VNode {
           title={tx.info.summary || "Invoice"}
           timestamp={AbsoluteTime.fromTimestamp(tx.timestamp)}
           iconPath={"I"}
-          // pending={tx.pending}
+          pending={
+            tx.extendedStatus === ExtendedStatus.Pending
+              ? i18n.str`Payment in progress`
+              : undefined
+          }
         />
       );
     case TransactionType.PeerPushCredit:
@@ -161,7 +189,11 @@ export function TransactionItem(props: { tx: Transaction }): VNode {
           title={tx.info.summary || "Transfer"}
           timestamp={AbsoluteTime.fromTimestamp(tx.timestamp)}
           iconPath={"T"}
-          // pending={tx.pending}
+          pending={
+            tx.extendedStatus === ExtendedStatus.Pending
+              ? i18n.str`Receiving the transfer`
+              : undefined
+          }
         />
       );
     case TransactionType.PeerPushDebit:
@@ -173,7 +205,11 @@ export function TransactionItem(props: { tx: Transaction }): VNode {
           title={tx.info.summary || "Transfer"}
           timestamp={AbsoluteTime.fromTimestamp(tx.timestamp)}
           iconPath={"T"}
-          // pending={tx.pending}
+          pending={
+            tx.extendedStatus === ExtendedStatus.Pending
+              ? i18n.str`Waiting to be received`
+              : undefined
+          }
         />
       );
     default: {
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index 217a77575..a9683f680 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -28,6 +28,7 @@ import {
   stringifyPaytoUri,
   TalerProtocolTimestamp,
   Transaction,
+  TransactionDeposit,
   TransactionType,
   TranslatedString,
   WithdrawalType,
@@ -714,13 +715,24 @@ export function TransactionView({
             }}
           />
         ) : transaction.wireTransferProgress === 100 ? (
-          <AlertView
-            alert={{
-              type: "success",
-              message: i18n.str`Wire transfer completed`,
-              description: i18n.str` `,
-            }}
-          />
+          <Fragment>
+            <AlertView
+              alert={{
+                type: "success",
+                message: i18n.str`Wire transfer completed`,
+                description: i18n.str` `,
+              }}
+            />
+            <Part
+              title={i18n.str`Transfer details`}
+              text={
+                <TrackingDepositDetails
+                  trackingState={transaction.trackingState}
+                />
+              }
+              kind="neutral"
+            />
+          </Fragment>
         ) : (
           <AlertView
             alert={{
@@ -1559,6 +1571,48 @@ function RefundDetails({ amount }: { amount: AmountWithFee }): VNode {
   );
 }
 
+function TrackingDepositDetails({
+  trackingState,
+}: {
+  trackingState: TransactionDeposit["trackingState"];
+}): VNode {
+  const { i18n } = useTranslationContext();
+
+  const trackByWtid = Object.values(trackingState ?? {}).reduce((prev, cur) => {
+    const am = Amounts.parseOrThrow(cur.amountEffective);
+    const sum = !prev[cur.wireTransferId]
+      ? am
+      : Amounts.add(prev[cur.wireTransferId], am).amount;
+    prev[cur.wireTransferId] = sum;
+    return prev;
+  }, {} as Record<string, AmountJson>);
+  const wireTransfers = Object.entries(trackByWtid).map(([id, amountJson]) => ({
+    id,
+    amount: Amounts.stringify(amountJson),
+  }));
+
+  return (
+    <PurchaseDetailsTable>
+      <tr>
+        <td>
+          <i18n.Translate>Transfer identification</i18n.Translate>
+        </td>
+        <td>
+          <i18n.Translate>Amount</i18n.Translate>
+        </td>
+      </tr>
+
+      {wireTransfers.map((wire) => (
+        <tr>
+          <td>{wire.id}</td>
+          <td>
+            <Amount value={wire.amount} />
+          </td>
+        </tr>
+      ))}
+    </PurchaseDetailsTable>
+  );
+}
 function DepositDetails({ amount }: { amount: AmountWithFee }): VNode {
   const { i18n } = useTranslationContext();