show bank details

This commit is contained in:
Sebastian 2023-06-21 11:28:27 -03:00
parent 8b85fe1775
commit 81bf1cc9c1
No known key found for this signature in database
GPG Key ID: 173909D1A5F66069
3 changed files with 171 additions and 156 deletions

View File

@ -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,6 +146,7 @@ export function BankDetailsByPaytoType({
const receiver = payto.params["receiver"] || undefined;
return (
<section>
<div
style={{
textAlign: "left",
@ -147,6 +170,41 @@ export function BankDetailsByPaytoType({
) : undefined}
</table>
</div>
<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(payto)}
</td>
<td>
<CopyButton getContent={() => stringifyPaytoUri(payto)} />
</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>
);
}

View File

@ -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>
);
}

View File

@ -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>
) : (
//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>
);
}