diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet/Transaction.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/Transaction.tsx | 68 |
1 files changed, 61 insertions, 7 deletions
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(); |