diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx | 183 |
1 files changed, 136 insertions, 47 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx index 9008e9751..a72026ab8 100644 --- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx @@ -1,66 +1,155 @@ -import { h, Fragment, VNode } from "preact"; -import { useState } from "preact/hooks"; +import { + AmountJson, + Amounts, + parsePaytoUri, + PaytoUri, +} from "@gnu-taler/taler-util"; +import { Fragment, h, VNode } from "preact"; +import { useEffect, useState } from "preact/hooks"; import { QR } from "../components/QR"; -import { ButtonBox, FontIcon, WalletBox } from "../components/styled"; +import { + ButtonDestructive, + ButtonPrimary, + WalletBox, + WarningBox, +} from "../components/styled"; export interface Props { reservePub: string; - paytos: string[]; + payto: string; + exchangeBaseUrl: string; + amount: AmountJson; onBack: () => void; } -export function ReserveCreated({ reservePub, paytos, onBack }: Props): VNode { - const [opened, setOpened] = useState(-1); +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, + onBack, + exchangeBaseUrl, + amount, +}: Props): VNode { + const paytoURI = parsePaytoUri(payto); + // const url = new URL(paytoURI?.targetPath); + if (!paytoURI) { + return <div>could not parse payto uri from exchange {payto}</div>; + } return ( <WalletBox> <section> - <h2>Reserve created!</h2> - <p> - Now you need to send money to the exchange to one of the following - accounts - </p> + <h1>Bank transfer details</h1> <p> - To complete the setup of the reserve, you must now initiate a wire - transfer using the given wire transfer subject and crediting the - specified amount to the indicated account of the exchange. + Please wire <b>{Amounts.stringify(amount)}</b> to: </p> + <BankDetailsByPaytoType + amount={Amounts.stringify(amount)} + exchangeBaseUrl={exchangeBaseUrl} + payto={paytoURI} + subject={reservePub} + /> </section> <section> - <ul> - {paytos.map((href, idx) => { - const url = new URL(href); - return ( - <li key={idx}> - <p> - <a - href="" - onClick={(e) => { - setOpened((o) => (o === idx ? -1 : idx)); - e.preventDefault(); - }} - > - {url.pathname} - </a> - {opened === idx && ( - <Fragment> - <p> - If your system supports RFC 8905, you can do this by - opening <a href={href}>this URI</a> or scan the QR with - your wallet - </p> - <QR text={href} /> - </Fragment> - )} - </p> - </li> - ); - })} - </ul> + <p> + <WarningBox> + Make sure to use the correct subject, otherwise the money will not + arrive in this wallet. + </WarningBox> + </p> + <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 + supports RFC 8905 + </p> + <QR text={payto} /> </section> <footer> - <ButtonBox onClick={onBack}> - <FontIcon>←</FontIcon> - </ButtonBox> <div /> + <ButtonDestructive onClick={onBack}>Cancel withdraw</ButtonDestructive> </footer> </WalletBox> ); |