1 files changed, 41 insertions, 0 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
new file mode 100644
index 000000000..e01336e02
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
@@ -0,0 +1,41 @@
+import { 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[];
+  onBack: () => void;
+}
+
+export function ReserveCreated({ reservePub, paytos, onBack }: Props): VNode {
+  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>
+      </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>
+      </section>
+      <footer>
+        <ButtonBox onClick={onBack}><FontIcon>&#x2190;</FontIcon></ButtonBox>
+        <div />
+      </footer>
+    </WalletBox>
+  );
+}