merchant-backoffice

commit ffc019841bf911256ac909f14c0441781b5dee6e
parent e4ae2eed1d15036ea8e86296226aaff031e689ee
Author: Sebastian <sebasjm@gmail.com>
Date:   Fri,  9 Sep 2022 12:36:13 -0300

prevent re-rendering QR code after reload

Diffstat:
M
packages/bank/src/pages/home/index.tsx
 | 
38
++++++++++++++++++++------------------

1 file changed, 20 insertions(+), 18 deletions(-)
diff --git a/packages/bank/src/pages/home/index.tsx b/packages/bank/src/pages/home/index.tsx
@@ -1103,6 +1103,25 @@ function TalerWithdrawalConfirmationQuestion(Props: any): VNode {
   </Fragment>);
 }
 
+function QrCodeSection({talerWithdrawUri, abortButton}:{talerWithdrawUri:string, abortButton: h.JSX.Element}) {
+  const i18n = useTranslator();
+  useEffect(() => {
+    //Taler Wallet WebExtension is listening to headers response and tab updates.
+    //In the SPA there is no header response with the Taler URI so 
+    //this hack manually triggers the tab update after the QR is in the DOM.
+    window.location.href = window.location.href.split("#")[0] + "#"
+  },[])
+
+  return <section id="main" class="content">
+  <h1 class="nav">{i18n`Withdraw to a Taler Wallet`}</h1>
+  <p>{i18n`You can use this QR code to withdraw to your mobile wallet:`}</p>
+  {QR({text: talerWithdrawUri})}
+  <p>Click <a id="linkqr" href={talerWithdrawUri}>{i18n`this link`}</a> to open your Taler wallet!</p>
+  <br />
+  {abortButton}
+  </section>
+}
+
 /**
  * Offer the QR code (and a clickable taler://-link) to
  * permit the passing of exchange and reserve details to
@@ -1163,26 +1182,9 @@ function TalerWithdrawalQRCode(Props: any): VNode {
     })
   }
 
-  function QrCodeSection() {
-    useEffect(() => {
-      //Taler Wallet WebExtension is listening to headers response and tab updates.
-      //In the SPA there is no header response with the Taler URI so 
-      //this hack manually triggers the tab update after the QR is in the DOM.
-      window.location.href = window.location.href.split("#")[0] + "#"
-    },[])
-  
-    return <section id="main" class="content">
-    <h1 class="nav">{i18n`Withdraw to a Taler Wallet`}</h1>
-    <p>{i18n`You can use this QR code to withdraw to your mobile wallet:`}</p>
-    {QR({text: talerWithdrawUri})}
-    <p>Click <a id="linkqr" href={talerWithdrawUri}>{i18n`this link`}</a> to open your Taler wallet!</p>
-    <br />
-    {abortButton}
-    </section>
-  }
   if (!data.selection_done) {
     setTimeout(() => mutate(), 1000); // check again after 1 second.
-    return (<QrCodeSection />);
+    return (<QrCodeSection talerWithdrawUri={talerWithdrawUri} abortButton={abortButton} />);
   }
   /**
    * Wallet POSTed the withdrawal details!  Ask the