diff options
author | Sebastian <sebasjm@gmail.com> | 2022-08-17 16:12:21 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-08-17 16:12:44 -0300 |
commit | 16777ba20564d8b002e33a01afa3ea49ca715cce (patch) | |
tree | 47f976276e4e7e049828ba9a38734d964fab52bc /packages/taler-wallet-webextension/src/components | |
parent | 17e627c2f024f6a4fe2b40b370ab1c010488ccc3 (diff) | |
download | wallet-core-16777ba20564d8b002e33a01afa3ea49ca715cce.tar.xz |
some fixes
Diffstat (limited to 'packages/taler-wallet-webextension/src/components')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx | 101 | ||||
-rw-r--r-- | packages/taler-wallet-webextension/src/components/styled/index.tsx | 13 |
2 files changed, 75 insertions, 39 deletions
diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx index ec5d1e7aa..609c82e10 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, useRef, useState } from "preact/hooks"; +import { useEffect, useMemo, 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, TooltipRight } from "./styled/index.js"; +import { ButtonBox, TooltipLeft, TooltipRight } from "./styled/index.js"; export interface BankDetailsProps { payto: PaytoUri | undefined; @@ -62,11 +62,6 @@ export function BankDetailsByPaytoType({ metadata with an minimum amount. </i18n.Translate> </p> - <Row - literal - name={<i18n.Translate>Reserve</i18n.Translate>} - value={subject} - /> <p> <i18n.Translate> @@ -80,6 +75,13 @@ export function BankDetailsByPaytoType({ <td> <Amount value={amount} hideCurrency /> BTC </td> + <td> + <CopyButton + getContent={() => + `${payto.targetPath} ${Amounts.stringifyValue(amount)} BTC` + } + /> + </td> </tr> {payto.segwitAddrs.map((addr, i) => ( <tr key={i}> @@ -87,6 +89,13 @@ export function BankDetailsByPaytoType({ <td> <Amount value={min} hideCurrency /> BTC </td> + <td> + <CopyButton + getContent={() => + `${addr} ${Amounts.stringifyValue(min)} BTC` + } + /> + </td> </tr> ))} </table> @@ -120,6 +129,8 @@ export function BankDetailsByPaytoType({ ) : payto.targetType === "iban" ? ( <Row name={<i18n.Translate>IBAN</i18n.Translate>} value={payto.iban} /> ) : undefined; + + const receiver = payto.params["receiver"] || undefined; return ( <div style={{ @@ -133,11 +144,7 @@ export function BankDetailsByPaytoType({ <table> {accountPart} <Row - name={<i18n.Translate>Exchange</i18n.Translate>} - value={exchangeBaseUrl} - /> - <Row - name={<i18n.Translate>Chosen amount</i18n.Translate>} + name={<i18n.Translate>Amount</i18n.Translate>} value={<Amount value={amount} />} /> <Row @@ -145,11 +152,47 @@ export function BankDetailsByPaytoType({ value={subject} literal /> + {receiver ? ( + <Row + name={<i18n.Translate>Receiver name</i18n.Translate>} + value={receiver} + /> + ) : undefined} </table> </div> ); } +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> + ); +} + function Row({ name, value, @@ -159,38 +202,15 @@ function Row({ value: string | VNode; literal?: boolean; }): VNode { - const [copied, setCopied] = useState(false); const preRef = useRef<HTMLPreElement>(null); const tdRef = useRef<HTMLTableCellElement>(null); - function copyText(): void { - const content = literal - ? preRef.current?.textContent - : tdRef.current?.textContent; - navigator.clipboard.writeText(content || ""); - setCopied(true); + + function getContent(): string { + return preRef.current?.textContent || tdRef.current?.textContent || ""; } - useEffect(() => { - if (copied) { - setTimeout(() => { - setCopied(false); - }, 1000); - } - }, [copied, preRef]); + return ( <tr> - <td> - {!copied ? ( - <ButtonBox onClick={copyText}> - <CopyIcon /> - </ButtonBox> - ) : ( - <TooltipRight content="Copied"> - <ButtonBox disabled> - <CopiedIcon /> - </ButtonBox> - </TooltipRight> - )} - </td> <td style={{ paddingRight: 8 }}> <b>{name}</b> </td> @@ -206,6 +226,9 @@ function Row({ ) : ( <td ref={tdRef}>{value}</td> )} + <td> + <CopyButton getContent={getContent} /> + </td> </tr> ); } diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx index 605860300..4ed9f8142 100644 --- a/packages/taler-wallet-webextension/src/components/styled/index.tsx +++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx @@ -319,6 +319,19 @@ export const TooltipRight = styled(Tooltip)` } `; +export const TooltipLeft = styled(Tooltip)` + ::before { + top: 0px; + right: 16px; + transform: rotate(90deg); + } + ::after { + top: -50%; + right: 28px; + margin-top: 6px; + } +`; + export const Overlay = styled.div` position: fixed; width: 100%; |