copying pybank's look. WIP

1 files changed, 65 insertions, 52 deletions

diff --git a/packages/bank/src/pages/home/index.tsx b/packages/bank/src/pages/home/index.tsx
index 070b78b..bb30682 100644
--- a/packages/bank/src/pages/home/index.tsx
+++ b/packages/bank/src/pages/home/index.tsx
@@ -1,4 +1,5 @@
 import useSWR, { SWRConfig, useSWRConfig } from "swr";
+import useSWRImmutable from "swr/immutable";
 import { h, Fragment, ComponentChildren, VNode, createContext } from "preact";
 import { useState, useEffect, StateUpdater, useContext } from "preact/hooks";
 import { Buffer } from "buffer";
@@ -316,14 +317,7 @@ function usePageState(
 
 /**
  * A 'wrapper' is typically a function that prepares one
- * particular API call and updates the state accordingly.
- * Whether a new component should be returned too, depends
- * on each case.
- *
- * FIXME: setting the Authorization headers and possing
- * the body to a POST request should be factored out in
- * a helper function.
- */
+ * particular API call and updates the state accordingly.  */
 
 /**
  * Abort a withdrawal operation via the Access API's /abort.
@@ -351,7 +345,7 @@ async function abortWithdrawalCall(
      * NOTE: tests show that when a same object is being
      * POSTed, caching might prevent same requests from being
      * made.  Hence, trying to POST twice the same amount might
-     * get silently ignored.
+     * get silently ignored.  Needs more observation!
      *
      * headers.append("cache-control", "no-store");
      * headers.append("cache-control", "no-cache");
@@ -382,8 +376,7 @@ async function abortWithdrawalCall(
   } else {
     console.log("Withdrawal operation aborted!");
     pageStateSetter((prevState) => {
-      delete prevState.talerWithdrawUri;
-      const { talerWithdrawUri, ...rest } = prevState;
+      const { talerWithdrawUri, withdrawalId, ...rest } = prevState;
       return {
         ...rest,
         withdrawalOutcome: "Withdrawal aborted!"
@@ -863,55 +856,19 @@ function PaytoWireTransfer(Props: any): VNode {
 }
 
 /**
- * Offer the QR code (and a clickable taler://-link) to
- * permit the passing of exchange and reserve details to
- * the bank.  Poll the backend until such operation is done.
+ * Additional authentication required to complete the operation.
+ * Not providing a back button, only abort.
  */
-function TalerWithdrawalQRCode(Props: any): VNode {
+function TalerWithdrawalConfirmationQuestion(Props): VNode {
   const [pageState, pageStateSetter] = useContext(PageContext);
-  const {
-    withdrawalId,
-    talerWithdrawUri,
-    accountLabel,
-    backendState } = Props;
+  const { backendState } = Props;
   const i18n = useTranslator();
-  console.log(`Showing withdraw URI: ${talerWithdrawUri}`);
-  // polling the wallet:
-  const { data, error } = useSWR(
-    `integration-api/accounts/${accountLabel}/withdrawal-operation/${withdrawalId}`
-  );
   const captchaNumbers = {
     a: Math.floor(Math.random() * 10),
     b: Math.floor(Math.random() * 10)
   }
   var captchaAnswer = "";
-  // fall here as long as the wallet did NOT communicate:
-  if (typeof error !== "undefined") {
-    console.log("withdraw details not arrived at the bank...", error);
-    switch(error.status) {
-      case 404: {
-        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 href={talerWithdrawUri}>{i18n`this link`}</a> to open your Taler wallet!</p>
-          <br />
-          <a class="pure-button" onClick={() => {
-            pageStateSetter((prevState: PageStateType) => {
-              const { withdrawalOutcome, withdrawalId, talerWithdrawUri, ...rest } = prevState;
-              return { ...rest, withdrawalInProgress: false };
-          })}}>{i18n`Abort`}</a>
-        </section>);
-      }
-      default: {
-        pageStateSetter((prevState: PageStateType) => ({...prevState, hasError: true, error: error }))
-        return <p>Could not complete the withdrawal: {error}</p>
-      }
-    }
-  }
-  // here the reserve public key and exchange payment details are known to the bank,
-  // ask for a confirmation (used to be the CAPTCHA page):
-  console.log("withdraw details arrived at the bank!");
+
   return (<Fragment>
     <h1 class="nav">{i18n`Confirm Withdrawal`}</h1>
     <p><Translate>
@@ -958,6 +915,61 @@ function TalerWithdrawalQRCode(Props: any): VNode {
 }
 
 /**
+ * Offer the QR code (and a clickable taler://-link) to
+ * permit the passing of exchange and reserve details to
+ * the bank.  Poll the backend until such operation is done.
+ */
+function TalerWithdrawalQRCode(Props: any): VNode {
+  // turns true when the wallet POSTed the reserve details:
+  const [pageState, pageStateSetter] = useContext(PageContext);
+  const {
+    withdrawalId,
+    talerWithdrawUri,
+    accountLabel,
+    backendState } = Props;
+  const i18n = useTranslator();
+  console.log(`Showing withdraw URI: ${talerWithdrawUri}`);
+  // waiting for the wallet:
+
+  const { data, error, mutate } = useSWR(`integration-api/withdrawal-operation/${withdrawalId}`);
+  if (typeof error !== "undefined") {
+    console.log(`withdrawal (${withdrawalId}) was never (correctly) created at the bank...`, error);
+    pageStateSetter((prevState: PageStateType) => ({
+      ...prevState, hasError: true, error: error
+  }))}
+
+  // data didn't arrive yet and wallet didn't communicate:
+  if (typeof data === "undefined") {
+    return <p>{i18n`Waiting the bank to create the operaion...`}</p>
+  }
+
+  /**
+   * Wallet didn't communicate withdrawal details yet:
+   */
+  console.log("withdrawal status", data);
+  if (!data.selection_done) {
+    setTimeout(() => mutate(), 1000); // check again after 1 second.
+    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 href={talerWithdrawUri}>{i18n`this link`}</a> to open your Taler wallet!</p>
+      <br />
+      <a class="pure-button" onClick={() => {
+        pageStateSetter((prevState: PageStateType) => {
+          const { withdrawalOutcome, withdrawalId, talerWithdrawUri, ...rest } = prevState;
+          return { ...rest, withdrawalInProgress: false };
+      })}}>{i18n`Abort`}</a>
+      </section>);
+  }
+  /**
+   * Wallet POSTed the withdrawal details!  Ask the
+   * user to authorize the operation (here CAPTCHA).
+   */
+  return (<TalerWithdrawalConfirmationQuestion backendState={backendState} />);
+}
+
+/**
  * Let the user choose an amount and submit the withdtawal.
  */
 function TalerWithdrawal(Props: any): VNode {
@@ -1304,6 +1316,7 @@ function Account(Props: any): VNode {
    * brought to this ("Account") page where they get informed about
    * the outcome.
    */
+  console.log(`maybe new withdrawal ${talerWithdrawUri}`);
   if (talerWithdrawUri) {
     console.log("Bank created a new Taler withdrawal");
     return (