diff options
Diffstat (limited to 'packages')
3 files changed, 171 insertions, 156 deletions
diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx index cd4f88c0c..b6fd494fa 100644 --- a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx +++ b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx @@ -17,31 +17,53 @@ import { AmountJson, Amounts, + parsePaytoUri, PaytoUri, segwitMinAmount, + stringifyPaytoUri, TranslatedString, } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { useEffect, useRef, useState } from "preact/hooks"; -import { useTranslationContext } from "@gnu-taler/web-util/browser"; +import { + useAsyncAsHook, + useTranslationContext, +} from "@gnu-taler/web-util/browser"; import { CopiedIcon, CopyIcon } from "../svg/index.js"; import { Amount } from "./Amount.js"; -import { ButtonBox, TooltipLeft } from "./styled/index.js"; +import { ButtonBox, TooltipLeft, WarningBox } from "./styled/index.js"; +import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; +import { useBackendContext } from "../context/backend.js"; export interface BankDetailsProps { - payto: PaytoUri | undefined; exchangeBaseUrl: string; subject: string; amount: AmountJson; } export function BankDetailsByPaytoType({ - payto, subject, exchangeBaseUrl, amount, }: BankDetailsProps): VNode { const { i18n } = useTranslationContext(); + const api = useBackendContext(); + + const hook = useAsyncAsHook(async () => { + const details = await api.wallet.call( + WalletApiOperation.GetExchangeDetailedInfo, + { + exchangeBaseUrl, + }, + ); + return { details }; + }); + + if (!hook || hook.hasError) return <Fragment />; + + const firstPayto = hook.response.details.exchange.paytoUris[0]; + const payto = parsePaytoUri(firstPayto); + if (!payto) return <Fragment />; if (payto.isKnown && payto.targetType === "bitcoin") { @@ -124,29 +146,65 @@ export function BankDetailsByPaytoType({ const receiver = payto.params["receiver"] || undefined; return ( - <div - style={{ - textAlign: "left", - border: "solid 1px black", - padding: 8, - borderRadius: 4, - }} - > - <p style={{ marginTop: 0 }}> - <i18n.Translate>Bank transfer details</i18n.Translate> - </p> + <section> + <div + style={{ + textAlign: "left", + border: "solid 1px black", + padding: 8, + borderRadius: 4, + }} + > + <p style={{ marginTop: 0 }}> + <i18n.Translate>Bank transfer details</i18n.Translate> + </p> + <table> + {accountPart} + <Row + name={i18n.str`Amount`} + value={<Amount value={amount} hideCurrency />} + /> + <Row name={i18n.str`Subject`} value={subject} literal /> + {receiver ? ( + <Row name={i18n.str`Receiver name`} value={receiver} /> + ) : undefined} + </table> + </div> <table> - {accountPart} - <Row - name={i18n.str`Amount`} - value={<Amount value={amount} hideCurrency />} - /> - <Row name={i18n.str`Subject`} value={subject} literal /> - {receiver ? ( - <Row name={i18n.str`Receiver name`} value={receiver} /> - ) : undefined} + <tbody> + <tr> + <td> + <pre> + <b> + <a + target="_bank" + rel="noreferrer" + title="RFC 8905 for designating targets for payments" + href="https://tools.ietf.org/html/rfc8905" + > + Payto URI + </a> + </b> + </pre> + </td> + <td width="100%" style={{ wordBreak: "break-all" }}> + {stringifyPaytoUri(payto)} + </td> + <td> + <CopyButton getContent={() => stringifyPaytoUri(payto)} /> + </td> + </tr> + </tbody> </table> - </div> + <p> + <WarningBox> + <i18n.Translate> + Make sure to use the correct subject, otherwise the money will not + arrive in this wallet. + </i18n.Translate> + </WarningBox> + </p> + </section> ); } diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx index 0bf9ef9d1..f489b805b 100644 --- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx @@ -50,48 +50,11 @@ export function ReserveCreated({ function TransferDetails(): VNode { if (!paytoURI) return <Fragment />; return ( - <section> - <BankDetailsByPaytoType - amount={amount} - exchangeBaseUrl={exchangeBaseUrl} - payto={paytoURI} - subject={reservePub} - /> - <table> - <tbody> - <tr> - <td> - <pre> - <b> - <a - target="_bank" - rel="noreferrer" - title="RFC 8905 for designating targets for payments" - href="https://tools.ietf.org/html/rfc8905" - > - Payto URI - </a> - </b> - </pre> - </td> - <td width="100%" style={{ wordBreak: "break-all" }}> - {stringifyPaytoUri(paytoURI)} - </td> - <td> - <CopyButton getContent={() => stringifyPaytoUri(paytoURI)} /> - </td> - </tr> - </tbody> - </table> - <p> - <WarningBox> - <i18n.Translate> - Make sure to use the correct subject, otherwise the money will not - arrive in this wallet. - </i18n.Translate> - </WarningBox> - </p> - </section> + <BankDetailsByPaytoType + amount={amount} + exchangeBaseUrl={exchangeBaseUrl} + subject={reservePub} + /> ); } diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx index 9ed41c5de..13adb34b2 100644 --- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx @@ -32,9 +32,11 @@ import { TransactionAction, TransactionDeposit, TransactionIdStr, + TransactionInternalWithdrawal, TransactionMajorState, TransactionMinorState, TransactionType, + TransactionWithdrawal, TranslatedString, WithdrawalType, } from "@gnu-taler/taler-util"; @@ -459,96 +461,14 @@ export function TransactionView({ TransactionMajorState.Pending ? undefined : transaction .withdrawalDetails.type === WithdrawalType.ManualTransfer ? ( //manual withdrawal - <Fragment> - <BankDetailsByPaytoType - amount={raw} - exchangeBaseUrl={transaction.exchangeBaseUrl} - payto={parsePaytoUri( - transaction.withdrawalDetails.exchangePaytoUris[0], - )} - subject={transaction.withdrawalDetails.reservePub} - /> - <table> - <tbody> - <tr> - <td> - <pre> - <b> - <a - target="_bank" - rel="noreferrer" - title="RFC 8905 for designating targets for payments" - href="https://tools.ietf.org/html/rfc8905" - > - Payto URI - </a> - </b> - </pre> - </td> - <td width="100%" style={{ wordBreak: "break-all" }}> - {transaction.withdrawalDetails.exchangePaytoUris[0]} - </td> - <td> - <CopyButton - getContent={() => - transaction.withdrawalDetails.type === - WithdrawalType.ManualTransfer - ? transaction.withdrawalDetails.exchangePaytoUris[0] - : "" - } - /> - </td> - </tr> - </tbody> - </table> - <WarningBox> - <i18n.Translate> - Make sure to use the correct subject, otherwise the money will - not arrive in this wallet. - </i18n.Translate> - </WarningBox> - </Fragment> + <BankDetailsByPaytoType + amount={raw} + exchangeBaseUrl={transaction.exchangeBaseUrl} + subject={transaction.withdrawalDetails.reservePub} + /> ) : ( //integrated bank withdrawal - <Fragment> - {!transaction.withdrawalDetails.confirmed && - transaction.withdrawalDetails.bankConfirmationUrl ? ( - <InfoBox> - <div style={{ display: "block" }}> - <i18n.Translate> - Wire transfer need a confirmation. Go to the{" "} - <a - href={transaction.withdrawalDetails.bankConfirmationUrl} - target="_blank" - rel="noreferrer" - style={{ display: "inline" }} - > - <i18n.Translate>bank site</i18n.Translate> - </a>{" "} - and check wire transfer operation to exchange account is - complete. - </i18n.Translate> - </div> - </InfoBox> - ) : undefined} - {transaction.withdrawalDetails.confirmed && - !transaction.withdrawalDetails.reserveIsReady && ( - <InfoBox> - <i18n.Translate> - Bank has confirmed the wire transfer. Waiting for the - exchange to send the coins - </i18n.Translate> - </InfoBox> - )} - {transaction.withdrawalDetails.confirmed && - transaction.withdrawalDetails.reserveIsReady && ( - <InfoBox> - <i18n.Translate> - Exchange is ready to send the coins, withdrawal in progress. - </i18n.Translate> - </InfoBox> - )} - </Fragment> + <ShowWithdrawalDetailForBankIntegrated transaction={transaction} /> )} <Part title={i18n.str`Details`} @@ -1404,7 +1324,7 @@ export function WithdrawDetails({ amount }: { amount: AmountWithFee }): VNode { <PurchaseDetailsTable> <tr> <td> - <i18n.Translate>Withdraw</i18n.Translate> + <i18n.Translate>Wire transfer</i18n.Translate> </td> <td> <Amount value={amount.value} maxFracSize={amount.maxFrac} /> @@ -1952,3 +1872,77 @@ function getShowButtonStates(transaction: Transaction) { }); return { abort, fail, resume, retry, remove, suspend }; } + +function ShowWithdrawalDetailForBankIntegrated({ + transaction, +}: { + transaction: TransactionWithdrawal | TransactionInternalWithdrawal; +}): VNode { + const { i18n } = useTranslationContext(); + const [showDetails, setShowDetails] = useState(false); + if ( + transaction.txState.major !== TransactionMajorState.Pending || + transaction.withdrawalDetails.type === WithdrawalType.ManualTransfer + ) + return <Fragment />; + const raw = Amounts.parseOrThrow(transaction.amountRaw); + return ( + <Fragment> + <EnabledBySettings name="advanceMode"> + <a + href="#" + onClick={(e) => { + e.preventDefault(); + setShowDetails(!showDetails); + }} + > + show details + </a> + </EnabledBySettings> + + {showDetails && ( + <BankDetailsByPaytoType + amount={raw} + exchangeBaseUrl={transaction.exchangeBaseUrl} + subject={transaction.withdrawalDetails.reservePub} + /> + )} + {!transaction.withdrawalDetails.confirmed && + transaction.withdrawalDetails.bankConfirmationUrl ? ( + <InfoBox> + <div style={{ display: "block" }}> + <i18n.Translate> + Wire transfer need a confirmation. Go to the{" "} + <a + href={transaction.withdrawalDetails.bankConfirmationUrl} + target="_blank" + rel="noreferrer" + style={{ display: "inline" }} + > + <i18n.Translate>bank site</i18n.Translate> + </a>{" "} + and check wire transfer operation to exchange account is complete. + </i18n.Translate> + </div> + </InfoBox> + ) : undefined} + {transaction.withdrawalDetails.confirmed && + !transaction.withdrawalDetails.reserveIsReady && ( + <InfoBox> + <i18n.Translate> + Bank has confirmed the wire transfer. Waiting for the exchange to + send the coins + </i18n.Translate> + </InfoBox> + )} + {transaction.withdrawalDetails.confirmed && + transaction.withdrawalDetails.reserveIsReady && ( + <InfoBox> + <i18n.Translate> + Exchange is ready to send the coins, withdrawal in progress. + </i18n.Translate> + </InfoBox> + )} + </Fragment> + ); +} |