aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx8
-rw-r--r--packages/taler-wallet-webextension/src/components/CopyButton.tsx54
-rw-r--r--packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx25
-rw-r--r--packages/taler-wallet-webextension/src/wallet/Transaction.tsx34
4 files changed, 117 insertions, 4 deletions
diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
index e97b3364f..6f4980aff 100644
--- a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
+++ b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
@@ -21,11 +21,11 @@ import {
segwitMinAmount,
} from "@gnu-taler/taler-util";
import { Fragment, h, VNode } from "preact";
-import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
import { useTranslationContext } from "../context/translation.js";
import { CopiedIcon, CopyIcon } from "../svg/index.js";
import { Amount } from "./Amount.js";
-import { ButtonBox, TooltipLeft, TooltipRight } from "./styled/index.js";
+import { ButtonBox, TooltipLeft } from "./styled/index.js";
export interface BankDetailsProps {
payto: PaytoUri | undefined;
@@ -123,9 +123,9 @@ export function BankDetailsByPaytoType({
</Fragment>
) : payto.targetType === "iban" ? (
<Fragment>
- {payto.bic !== undefined ?
+ {payto.bic !== undefined ? (
<Row name={<i18n.Translate>BIC</i18n.Translate>} value={payto.bic} />
- : undefined}
+ ) : undefined}
<Row name={<i18n.Translate>IBAN</i18n.Translate>} value={payto.iban} />
</Fragment>
) : undefined;
diff --git a/packages/taler-wallet-webextension/src/components/CopyButton.tsx b/packages/taler-wallet-webextension/src/components/CopyButton.tsx
new file mode 100644
index 000000000..2024e2423
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/components/CopyButton.tsx
@@ -0,0 +1,54 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { h, VNode } from "preact";
+import { useEffect, useState } from "preact/hooks";
+import { CopiedIcon, CopyIcon } from "../svg/index.js";
+import { ButtonBox, TooltipLeft } from "./styled/index.js";
+
+export function CopyButton({
+ getContent,
+}: {
+ getContent: () => string;
+}): VNode {
+ const [copied, setCopied] = useState(false);
+ function copyText(): void {
+ navigator.clipboard.writeText(getContent() || "");
+ setCopied(true);
+ }
+ useEffect(() => {
+ if (copied) {
+ setTimeout(() => {
+ setCopied(false);
+ }, 1000);
+ }
+ }, [copied]);
+
+ if (!copied) {
+ return (
+ <ButtonBox onClick={copyText}>
+ <CopyIcon />
+ </ButtonBox>
+ );
+ }
+ return (
+ <TooltipLeft content="Copied">
+ <ButtonBox disabled>
+ <CopiedIcon />
+ </ButtonBox>
+ </TooltipLeft>
+ );
+}
diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
index 1440229af..38590f715 100644
--- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
@@ -17,6 +17,7 @@ import { AmountJson, PaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util";
import { Fragment, h, VNode } from "preact";
import { Amount } from "../components/Amount.js";
import { BankDetailsByPaytoType } from "../components/BankDetailsByPaytoType.js";
+import { CopyButton } from "../components/CopyButton.js";
import { ErrorMessage } from "../components/ErrorMessage.js";
import { QR } from "../components/QR.js";
import { Title, WarningBox } from "../components/styled/index.js";
@@ -56,6 +57,30 @@ export function ReserveCreated({
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%">{stringifyPaytoUri(paytoURI)}</td>
+ <td>
+ <CopyButton getContent={() => stringifyPaytoUri(paytoURI)} />
+ </td>
+ </tr>
+ </tbody>
+ </table>
<p>
<WarningBox>
<i18n.Translate>
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index 9fff76442..29d1bdd45 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -42,6 +42,7 @@ 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 { CopyButton } from "../components/CopyButton.js";
import { ErrorTalerOperation } from "../components/ErrorTalerOperation.js";
import { Loading } from "../components/Loading.js";
import { LoadingError } from "../components/LoadingError.js";
@@ -293,6 +294,39 @@ export function TransactionView({
)}
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%">
+ {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