diff options
author | Sebastian <sebasjm@gmail.com> | 2023-06-21 14:51:14 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2023-06-21 14:51:14 -0300 |
commit | 9dbf0bd7d2dc9353aa210a0c33faf0a5c5086f73 (patch) | |
tree | 520426b320e47656743c3d577204f7591a583c95 /packages/taler-wallet-webextension/src/wallet | |
parent | 7010e707bab40b74d4ec258bd2207be6cf254f31 (diff) | |
download | wallet-core-9dbf0bd7d2dc9353aa210a0c33faf0a5c5086f73.tar.xz |
better wording to the tx details
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet')
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/History.tsx | 8 | ||||
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/Transaction.tsx | 130 |
2 files changed, 119 insertions, 19 deletions
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} /> |