show bank details
This commit is contained in:
Sebastian
parent
8b85fe1775
commit
81bf1cc9c1
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user