diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet/Transaction.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/Transaction.tsx | 76 |
1 files changed, 45 insertions, 31 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx index 4383dcc9a..e7ab65722 100644 --- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx @@ -19,7 +19,6 @@ import { AmountJson, Amounts, AmountString, - Location, MerchantInfo, NotificationType, OrderShortInfo, @@ -28,7 +27,6 @@ import { stringifyPaytoUri, TalerErrorCode, TalerPreciseTimestamp, - TalerProtocolTimestamp, Transaction, TransactionAction, TransactionDeposit, @@ -39,7 +37,7 @@ import { TransactionType, TransactionWithdrawal, TranslatedString, - WithdrawalType, + WithdrawalType } from "@gnu-taler/taler-util"; import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; @@ -47,13 +45,12 @@ import { styled } from "@linaria/react"; import { isPast } from "date-fns"; import { ComponentChildren, Fragment, h, VNode } from "preact"; import { useEffect, useState } from "preact/hooks"; -import emptyImg from "../../static/img/empty.png"; import { Amount } from "../components/Amount.js"; import { BankDetailsByPaytoType } from "../components/BankDetailsByPaytoType.js"; import { AlertView, ErrorAlertView } from "../components/CurrentAlerts.js"; import { EnabledBySettings } from "../components/EnabledBySettings.js"; import { Loading } from "../components/Loading.js"; -import { Kind, Part, PartCollapsible, PartPayto } from "../components/Part.js"; +import { Kind, Part, PartPayto } from "../components/Part.js"; import { QR } from "../components/QR.js"; import { ShowFullContractTermPopup } from "../components/ShowFullContractTermPopup.js"; import { @@ -61,13 +58,11 @@ import { ErrorBox, InfoBox, Link, - ListOfProducts, Overlay, - Row, SmallLightText, SubTitle, SvgIcon, - WarningBox, + WarningBox } from "../components/styled/index.js"; import { Time } from "../components/Time.js"; import { alertFromError, useAlertContext } from "../context/alert.js"; @@ -77,12 +72,8 @@ import { useSettings } from "../hooks/useSettings.js"; import { Button } from "../mui/Button.js"; import { SafeHandler } from "../mui/handlers.js"; import { Pages } from "../NavigationBar.js"; -import { assertUnreachable } from "../utils/index.js"; import refreshIcon from "../svg/refresh_24px.inline.svg"; -import refreshIcon1 from "../svg/refresh_outlined_24px.inline.svg"; -import refreshIcon2 from "../svg/refresh_rounded_24px.inline.svg"; -import refreshIcon3 from "../svg/refresh_sharp_24px.inline.svg"; -import refreshIcon4 from "../svg/refresh_two_tone_24px.inline.svg"; +import { assertUnreachable } from "../utils/index.js"; interface Props { tid: string; @@ -444,6 +435,8 @@ export function TransactionView({ transaction.type === TransactionType.Withdrawal || transaction.type === TransactionType.InternalWithdrawal ) { + const conversion = transaction.withdrawalDetails.type === WithdrawalType.ManualTransfer ? + transaction.withdrawalDetails.exchangeCreditAccountDetails ?? [] : [] return ( <TransactionTemplate transaction={transaction} @@ -472,7 +465,7 @@ export function TransactionView({ //manual withdrawal <BankDetailsByPaytoType amount={raw} - exchangeBaseUrl={transaction.exchangeBaseUrl} + accounts={transaction.withdrawalDetails.exchangeCreditAccountDetails ?? []} subject={transaction.withdrawalDetails.reservePub} /> ) : ( @@ -973,12 +966,12 @@ export function TransactionView({ kind="neutral" /> {transaction.talerUri && ( - <Part - title={i18n.str`URI`} - text={<ShowQrWithCopy text={transaction.talerUri} />} - kind="neutral" - /> - )} + <Part + title={i18n.str`URI`} + text={<ShowQrWithCopy text={transaction.talerUri} />} + kind="neutral" + /> + )} <Part title={i18n.str`Details`} text={ @@ -1417,7 +1410,7 @@ export function TransferPickupDetails({ </PurchaseDetailsTable> ); } -export function WithdrawDetails({ amount }: { amount: AmountWithFee }): VNode { +export function WithdrawDetails({ conversion, amount }: { conversion?: AmountJson, amount: AmountWithFee }): VNode { const { i18n } = useTranslationContext(); const maxFrac = [amount.fee, amount.fee] @@ -1428,15 +1421,36 @@ export function WithdrawDetails({ amount }: { amount: AmountWithFee }): VNode { return ( <PurchaseDetailsTable> - <tr> - <td> - <i18n.Translate>Transfer</i18n.Translate> - </td> - <td> - <Amount value={amount.value} maxFracSize={amount.maxFrac} /> - </td> - </tr> - + {conversion ? + <Fragment> + <tr> + <td> + <i18n.Translate>Transfer</i18n.Translate> + </td> + <td> + <Amount value={conversion} maxFracSize={amount.maxFrac} /> + </td> + </tr> + {conversion.fraction === amount.value.fraction && conversion.value === amount.value.value ? undefined : + <tr> + <td> + <i18n.Translate>Converted</i18n.Translate> + </td> + <td> + <Amount value={amount.value} maxFracSize={amount.maxFrac} /> + </td> + </tr> + } + </Fragment> + : <tr> + <td> + <i18n.Translate>Transfer</i18n.Translate> + </td> + <td> + <Amount value={amount.value} maxFracSize={amount.maxFrac} /> + </td> + </tr> + } {Amounts.isNonZero(amount.fee) && ( <tr> <td> @@ -2007,7 +2021,7 @@ function ShowWithdrawalDetailForBankIntegrated({ {showDetails && ( <BankDetailsByPaytoType amount={raw} - exchangeBaseUrl={transaction.exchangeBaseUrl} + accounts={transaction.withdrawalDetails.exchangeCreditAccountDetails ?? []} subject={transaction.withdrawalDetails.reservePub} /> )} |