split QR and added into reserve details

3 files changed, 44 insertions, 26 deletions

diff --git a/packages/frontend/src/components/exception/QR.tsx b/packages/frontend/src/components/exception/QR.tsx
new file mode 100644
index 0000000..4295c63
--- /dev/null
+++ b/packages/frontend/src/components/exception/QR.tsx
@@ -0,0 +1,35 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { h, VNode } from "preact";
+import { useEffect, useRef } from "preact/hooks";
+import qrcode from "qrcode-generator";
+
+export function QR({ text }: { text: string; }):VNode {
+  const divRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const qr = qrcode(0, 'L');
+    qr.addData(text);
+    qr.make();
+    divRef.current.innerHTML = qr.createSvgTag({
+      scalable: true,
+    });
+  });
+
+  return <div style={{ width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+    <div style={{ width: '50%', minWidth: 200, maxWidth: 300 }} ref={divRef} />
+  </div>;
+}
diff --git a/packages/frontend/src/paths/instance/reserves/create/CreatedSuccessfully.tsx b/packages/frontend/src/paths/instance/reserves/create/CreatedSuccessfully.tsx
index 3712bd7..255486d 100644
--- a/packages/frontend/src/paths/instance/reserves/create/CreatedSuccessfully.tsx
+++ b/packages/frontend/src/paths/instance/reserves/create/CreatedSuccessfully.tsx
@@ -13,12 +13,12 @@
  You should have received a copy of the GNU General Public License along with
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
+
 import { h, VNode } from "preact";
-import { useEffect, useRef, useState } from "preact/hooks";
 import { CreatedSuccessfully as Template } from "../../../../components/notifications/CreatedSuccessfully";
 import { MerchantBackend } from "../../../../declaration";
 import { Translate } from "../../../../i18n";
-import qrcode from "qrcode-generator"
+import { QR } from "../../../../components/exception/QR";
 
 type Entity = { request: MerchantBackend.Tips.ReserveCreateRequest, response: MerchantBackend.Tips.ReserveCreateConfirmation };
 
@@ -69,7 +69,6 @@ export function CreatedSuccessfully({ entity, onConfirm, onCreateAnother }: Prop
       </div>
     </div>
     <p class="is-size-5"><Translate>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.</Translate></p>
-    
     <p class="is-size-5"><Translate>If your system supports RFC 8905, you can do this by opening this URI:</Translate></p>
     <pre>
       <a target="_blank" rel="noreferrer" href={link}>{link}</a>
@@ -78,19 +77,3 @@ export function CreatedSuccessfully({ entity, onConfirm, onCreateAnother }: Prop
   </Template>;
 }
 
-const QR = ({ text }: { text: string }) => {
-  const divRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    const qr = qrcode(0, 'L')
-    qr.addData(text)
-    qr.make()
-    divRef.current.innerHTML = qr.createSvgTag({
-      scalable: true,
-    })
-  })
-
-  return <div style={{ width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-    <div style={{ width: '50%', minWidth: 200, maxWidth: 300 }} ref={divRef} />
-  </div>
-}
-
diff --git a/packages/frontend/src/paths/instance/reserves/details/DetailPage.tsx b/packages/frontend/src/paths/instance/reserves/details/DetailPage.tsx
index d3170a4..573d689 100644
--- a/packages/frontend/src/paths/instance/reserves/details/DetailPage.tsx
+++ b/packages/frontend/src/paths/instance/reserves/details/DetailPage.tsx
@@ -22,6 +22,7 @@
 import { Amounts } from "@gnu-taler/taler-util";
 import { format } from "date-fns";
 import { Fragment, h, VNode } from "preact";
+import { QR } from "../../../../components/exception/QR";
 import { FormProvider } from "../../../../components/form/FormProvider";
 import { Input } from "../../../../components/form/Input";
 import { InputCurrency } from "../../../../components/form/InputCurrency";
@@ -43,6 +44,8 @@ interface Props {
 export function DetailPage({ id, selected, onBack }: Props): VNode {
   const i18n = useTranslator()
   const didExchangeAckTransfer = Amounts.isNonZero(Amounts.parseOrThrow(selected.exchange_initial_amount))
+  const link = `${selected.payto_uri}?message=${id}&amount=${selected.merchant_initial_amount}`
+
   return <div class="columns">
     <div class="column" />
     <div class="column is-four-fifths">
@@ -82,11 +85,12 @@ export function DetailPage({ id, selected, onBack }: Props): VNode {
             </div>
           </div>
         </Fragment> : <Fragment>
-          <p class="is-size-5"><Translate>Now you should transfer to the exchange into the account address indicated above and the transaction must carry the subject message.</Translate></p>
-          <p class="is-size-5"><Translate>For example :</Translate></p>
+          <p class="is-size-5"><Translate>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.</Translate></p>
+          <p class="is-size-5"><Translate>If your system supports RFC 8905, you can do this by opening this URI:</Translate></p>
           <pre>
-            {selected.payto_uri}?message={id}&amount={selected.merchant_initial_amount}
+            <a target="_blank" rel="noreferrer" href={link}>{link}</a>
           </pre>
+          <QR text={link} />
         </Fragment>
         }
 
@@ -110,10 +114,6 @@ function EmptyTable(): VNode {
 }
 
 
-async function copyToClipboard(text: string) {
-  return navigator.clipboard.writeText(text)
-}
-
 interface TableProps {
   tips: MerchantBackend.Tips.TipStatusEntry[];
 }