diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx | 54 |
1 files changed, 40 insertions, 14 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx index e01336e02..9008e9751 100644 --- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx @@ -1,8 +1,7 @@ -import { Fragment, VNode } from "preact"; +import { h, Fragment, VNode } from "preact"; import { useState } from "preact/hooks"; import { QR } from "../components/QR"; import { ButtonBox, FontIcon, WalletBox } from "../components/styled"; - export interface Props { reservePub: string; paytos: string[]; @@ -10,30 +9,57 @@ export interface Props { } export function ReserveCreated({ reservePub, paytos, onBack }: Props): VNode { - const [opened, setOpened] = useState(-1) + const [opened, setOpened] = useState(-1); return ( <WalletBox> <section> <h2>Reserve created!</h2> - <p>Now you need to send money to the exchange to one of the following accounts</p> - <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.</p> + <p> + Now you need to send money to the exchange to one of the following + accounts + </p> + <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. + </p> </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> + 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> </section> <footer> - <ButtonBox onClick={onBack}><FontIcon>←</FontIcon></ButtonBox> + <ButtonBox onClick={onBack}> + <FontIcon>←</FontIcon> + </ButtonBox> <div /> </footer> </WalletBox> |