commit 9dc242c112763af8e0d248483018b98aac57de87
parent 98009e006249c709c25d87fc994074fdb63d57f2
Author: Florian Dold <florian@dold.me>
Date: Wed, 28 May 2025 02:39:31 +0200
webext: extremely crude MVP for rendering KYC auth info in deposit tx
Diffstat:
1 file changed, 77 insertions(+), 29 deletions(-)
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -19,6 +19,7 @@ import {
AmountJson,
Amounts,
AmountString,
+ assertUnreachable,
DenomLossEventType,
Duration,
MerchantInfo,
@@ -27,7 +28,6 @@ import {
parsePaytoUri,
PaytoUri,
ScopeInfo,
- ScopeType,
stringifyPaytoUri,
TalerErrorCode,
TalerPreciseTimestamp,
@@ -42,13 +42,9 @@ import {
TransactionWithdrawal,
TranslatedString,
WithdrawalType,
- assertUnreachable,
} from "@gnu-taler/taler-util";
import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
-import {
- encodeCrockForURI,
- useTranslationContext,
-} from "@gnu-taler/web-util/browser";
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
import { styled } from "@linaria/react";
import { isPast } from "date-fns";
import { ComponentChildren, Fragment, h, VNode } from "preact";
@@ -70,7 +66,6 @@ import {
SmallLightText,
SubTitle,
SvgIcon,
- WarningBox,
} from "../components/styled/index.js";
import { Time } from "../components/Time.js";
import { alertFromError, useAlertContext } from "../context/alert.js";
@@ -235,25 +230,52 @@ function TransactionTemplate({
const showButton = getShowButtonStates(transaction);
- return (
- <Fragment>
- <section style={{ padding: 8, textAlign: "center" }}>
- {transaction?.error &&
- // FIXME: wallet core should stop sending this error on KYC
- transaction.error.code !==
- TalerErrorCode.WALLET_WITHDRAWAL_KYC_REQUIRED ? (
- <ErrorAlertView
- error={alertFromError(
- i18n,
- i18n.str`There was an error trying to complete the transaction.`,
- transaction.error,
- )}
- />
- ) : undefined}
- {transaction.txState.major === TransactionMajorState.Pending &&
- (transaction.txState.minor === TransactionMinorState.KycRequired ||
- transaction.txState.minor ===
- TransactionMinorState.BalanceKycRequired ? (
+ let pendingOrKycInfo: VNode | undefined = undefined;
+
+ switch (transaction.txState.major) {
+ case TransactionMajorState.Pending: {
+ switch (transaction.txState.minor) {
+ case TransactionMinorState.KycAuthRequired: {
+ pendingOrKycInfo = (
+ <AlertView
+ alert={{
+ type: "warning",
+ message: i18n.str`Bank account confirmation required for the transaction to complete.`,
+ description: (
+ <div>
+ <p>
+ Your account:{" "}
+ <code>
+ {transaction.kycAuthTransferInfo?.debitPaytoUri}
+ </code>
+ </p>
+ <p>
+ Deposit account public key:{" "}
+ <code>{transaction.kycAuthTransferInfo?.accountPub}</code>
+ </p>
+ <p>
+ Payment targets:{" "}
+ <ul>
+ {transaction.kycAuthTransferInfo?.creditPaytoUris.map(
+ (x) => (
+ <li>
+ <code>{x}</code>
+ </li>
+ ),
+ )}
+ </ul>
+ </p>
+ </div>
+ ),
+ }}
+ />
+ );
+ break;
+ }
+ case TransactionMinorState.MergeKycRequired:
+ case TransactionMinorState.KycRequired:
+ case TransactionMinorState.BalanceKycRequired: {
+ pendingOrKycInfo = (
<AlertView
alert={{
type: "warning",
@@ -269,14 +291,19 @@ function TransactionTemplate({
target="_bank"
href={transaction.kycUrl}
>
- KYC verifier.
+ KYC status page.
</a>
</i18n.Translate>
</div>
),
}}
/>
- ) : (
+ );
+ break;
+ }
+ default: {
+ // Plain pending, no KYC.
+ pendingOrKycInfo = (
<InfoBox>
<div style={{ justifyContent: "center", lineHeight: "25px" }}>
<i18n.Translate>
@@ -291,7 +318,28 @@ function TransactionTemplate({
</Link>
</div>
</InfoBox>
- ))}
+ );
+ }
+ }
+ }
+ }
+
+ return (
+ <Fragment>
+ <section style={{ padding: 8, textAlign: "center" }}>
+ {transaction?.error &&
+ // FIXME: wallet core should stop sending this error on KYC
+ transaction.error.code !==
+ TalerErrorCode.WALLET_WITHDRAWAL_KYC_REQUIRED ? (
+ <ErrorAlertView
+ error={alertFromError(
+ i18n,
+ i18n.str`There was an error trying to complete the transaction.`,
+ transaction.error,
+ )}
+ />
+ ) : undefined}
+ {pendingOrKycInfo}
{transaction.txState.major === TransactionMajorState.Aborted && (
<InfoBox>
<i18n.Translate>This transaction was aborted.</i18n.Translate>
