diff --git a/packages/demobank-ui/src/pages/AccountPage.tsx b/packages/demobank-ui/src/pages/AccountPage.tsx index edc5da5ae..820c59984 100644 --- a/packages/demobank-ui/src/pages/AccountPage.tsx +++ b/packages/demobank-ui/src/pages/AccountPage.tsx @@ -14,7 +14,7 @@ GNU Taler; see the file COPYING. If not, see */ -import { Amounts, HttpStatusCode, parsePaytoUri } from "@gnu-taler/taler-util"; +import { Amounts, HttpStatusCode, parsePaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util"; import { ErrorType, HttpResponsePaginated, @@ -27,6 +27,7 @@ import { useAccountDetails } from "../hooks/access.js"; import { LoginForm } from "./LoginForm.js"; import { PaymentOptions } from "./PaymentOptions.js"; import { notifyError } from "../hooks/notification.js"; +import { useEffect, useState } from "preact/hooks"; interface Props { account: string; @@ -34,6 +35,60 @@ interface Props { error: HttpResponsePaginated, ) => VNode; } + +export const CopyIcon = (): VNode => ( + + + + +); + +export const CopiedIcon = (): VNode => ( + + + +); + +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 ( + + ); + } + return ( +
+ +
+ ); +} + + /** * Query account information and show QR code if there is pending withdrawal */ @@ -66,7 +121,6 @@ export function AccountPage({ account, onLoadNotOk }: Props): VNode {
Payto from server is not valid "{data.paytoUri}"
); } - const accountNumber = payto.iban; const balanceIsDebit = data.balance.credit_debit_indicator == "debit"; const limit = balanceIsDebit ? Amounts.sub(debitThreshold, balance).amount @@ -76,8 +130,7 @@ export function AccountPage({ account, onLoadNotOk }: Props): VNode {

- Welcome, {accountNumber ? `${account} (${accountNumber})` : account} - ! + Welcome, {account} ({payto.iban})! stringifyPaytoUri(payto)} />