diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx | 119 |
1 files changed, 13 insertions, 106 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx index a72026ab8..075126dc8 100644 --- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx @@ -1,18 +1,8 @@ -import { - AmountJson, - Amounts, - parsePaytoUri, - PaytoUri, -} from "@gnu-taler/taler-util"; +import { AmountJson, Amounts, parsePaytoUri } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; -import { useEffect, useState } from "preact/hooks"; +import { BankDetailsByPaytoType } from "../components/BankDetailsByPaytoType"; import { QR } from "../components/QR"; -import { - ButtonDestructive, - ButtonPrimary, - WalletBox, - WarningBox, -} from "../components/styled"; +import { ButtonDestructive, WarningBox } from "../components/styled"; export interface Props { reservePub: string; payto: string; @@ -21,92 +11,6 @@ export interface Props { onBack: () => void; } -interface BankDetailsProps { - payto: PaytoUri; - exchangeBaseUrl: string; - subject: string; - amount: string; -} - -function Row({ - name, - value, - literal, -}: { - name: string; - value: string; - literal?: boolean; -}): VNode { - const [copied, setCopied] = useState(false); - function copyText(): void { - navigator.clipboard.writeText(value); - setCopied(true); - } - useEffect(() => { - setTimeout(() => { - setCopied(false); - }, 1000); - }, [copied]); - return ( - <tr> - <td> - {!copied ? ( - <ButtonPrimary small onClick={copyText}> - Copy - </ButtonPrimary> - ) : ( - <ButtonPrimary small disabled> - Copied - </ButtonPrimary> - )} - </td> - <td> - <b>{name}</b> - </td> - {literal ? ( - <td> - <pre style={{ whiteSpace: "pre-wrap", wordBreak: "break-word" }}> - {value} - </pre> - </td> - ) : ( - <td>{value}</td> - )} - </tr> - ); -} - -function BankDetailsByPaytoType({ - payto, - subject, - exchangeBaseUrl, - amount, -}: BankDetailsProps): VNode { - const firstPart = !payto.isKnown ? ( - <Fragment> - <Row name="Account" value={payto.targetPath} /> - <Row name="Exchange" value={exchangeBaseUrl} /> - </Fragment> - ) : payto.targetType === "x-taler-bank" ? ( - <Fragment> - <Row name="Bank host" value={payto.host} /> - <Row name="Bank account" value={payto.account} /> - <Row name="Exchange" value={exchangeBaseUrl} /> - </Fragment> - ) : payto.targetType === "iban" ? ( - <Fragment> - <Row name="IBAN" value={payto.iban} /> - <Row name="Exchange" value={exchangeBaseUrl} /> - </Fragment> - ) : undefined; - return ( - <table> - {firstPart} - <Row name="Amount" value={amount} /> - <Row name="Subject" value={subject} literal /> - </table> - ); -} export function ReserveCreated({ reservePub, payto, @@ -120,11 +24,12 @@ export function ReserveCreated({ return <div>could not parse payto uri from exchange {payto}</div>; } return ( - <WalletBox> + <Fragment> <section> - <h1>Bank transfer details</h1> + <h1>Exchange is ready for withdrawal!</h1> <p> - Please wire <b>{Amounts.stringify(amount)}</b> to: + To complete the process you need to wire{" "} + <b>{Amounts.stringify(amount)}</b> to the exchange bank account </p> <BankDetailsByPaytoType amount={Amounts.stringify(amount)} @@ -132,14 +37,14 @@ export function ReserveCreated({ payto={paytoURI} subject={reservePub} /> - </section> - <section> <p> <WarningBox> Make sure to use the correct subject, otherwise the money will not arrive in this wallet. </WarningBox> </p> + </section> + <section> <p> Alternative, you can also scan this QR code or open{" "} <a href={payto}>this link</a> if you have a banking app installed that @@ -149,8 +54,10 @@ export function ReserveCreated({ </section> <footer> <div /> - <ButtonDestructive onClick={onBack}>Cancel withdraw</ButtonDestructive> + <ButtonDestructive onClick={onBack}> + Cancel withdrawal + </ButtonDestructive> </footer> - </WalletBox> + </Fragment> ); } |