many changes

activate eslint
update file headers
removed history and preact-router
remove eslint errors and more applied prettier

1 files changed, 179 insertions, 119 deletions

diff --git a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
index 30c1fe998..3cf552f39 100644
--- a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
+++ b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
@@ -17,26 +17,29 @@
 import {
   Amounts,
   HttpStatusCode,
-  Logger,
   TalerError,
   WithdrawUriResult,
-  parsePaytoUri
+  assertUnreachable,
+  parsePaytoUri,
 } from "@gnu-taler/taler-util";
-import { Attention, Loading, notifyInfo, useTranslationContext } from "@gnu-taler/web-util/browser";
-import { Fragment, VNode, h } from "preact";
+import {
+  Attention,
+  Loading,
+  notifyInfo,
+  useTranslationContext,
+} from "@gnu-taler/web-util/browser";
+import { VNode, h } from "preact";
 import { ErrorLoadingWithDebug } from "../components/ErrorLoadingWithDebug.js";
 import { useWithdrawalDetails } from "../hooks/access.js";
+import { RouteDefinition } from "../route.js";
 import { QrCodeSection } from "./QrCodeSection.js";
 import { WithdrawalConfirmationQuestion } from "./WithdrawalConfirmationQuestion.js";
-import { assertUnreachable } from "./WithdrawalOperationPage.js";
-
-const logger = new Logger("WithdrawalQRCode");
 
 interface Props {
   withdrawUri: WithdrawUriResult;
-  onClose: () => void;
-  onAuthorizationRequired: () => void,
-
+  onOperationAborted: () => void;
+  routeClose: RouteDefinition<Record<string, never>>;
+  onAuthorizationRequired: () => void;
 }
 /**
  * Offer the QR code (and a clickable taler://-link) to
@@ -45,90 +48,107 @@ interface Props {
  */
 export function WithdrawalQRCode({
   withdrawUri,
-  onClose,
+  onOperationAborted,
+  routeClose,
   onAuthorizationRequired,
 }: Props): VNode {
   const { i18n } = useTranslationContext();
   const result = useWithdrawalDetails(withdrawUri.withdrawalOperationId);
 
   if (!result) {
-    return <Loading />
+    return <Loading />;
   }
   if (result instanceof TalerError) {
-    return <ErrorLoadingWithDebug error={result} />
+    return <ErrorLoadingWithDebug error={result} />;
   }
   if (result.type === "fail") {
     switch (result.case) {
       case HttpStatusCode.BadRequest:
-      case HttpStatusCode.NotFound: return <OperationNotFound onClose={onClose} />
-      default: assertUnreachable(result)
+      case HttpStatusCode.NotFound:
+        return <OperationNotFound routeClose={routeClose} />;
+      default:
+        assertUnreachable(result);
     }
   }
 
   const { body: data } = result;
 
   if (data.status === "aborted") {
-    return <section id="main" class="content">
-      <h1 class="nav">{i18n.str`Operation aborted`}</h1>
-      <section>
-        <p>
-          <i18n.Translate>
-            The wire transfer to the Taler Exchange operator's account was aborted, your balance
-            was not affected.
-          </i18n.Translate>
-        </p>
-        <p>
-          <i18n.Translate>
-            You can close this page now or continue to the account page.
-          </i18n.Translate>
-        </p>
-        <a class="pure-button pure-button-primary"
-          style={{ float: "right" }}
-          onClick={async (e) => {
-            e.preventDefault();
-            onClose()
-          }}>
-          {i18n.str`Continue`}
-        </a>
-
+    return (
+      <section id="main" class="content">
+        <h1 class="nav">{i18n.str`Operation aborted`}</h1>
+        <section>
+          <p>
+            <i18n.Translate>
+              The wire transfer to the Taler Exchange operator's account was
+              aborted, your balance was not affected.
+            </i18n.Translate>
+          </p>
+          <p>
+            <i18n.Translate>
+              You can close this page now or continue to the account page.
+            </i18n.Translate>
+          </p>
+          <a
+            href={routeClose.url({})}
+            class="pure-button pure-button-primary"
+            style={{ float: "right" }}
+          >
+            <i18n.Translate>Continue</i18n.Translate>
+          </a>
+        </section>
       </section>
-    </section>
+    );
   }
 
   if (data.status === "confirmed") {
-    return <div class="relative ml-auto mr-auto transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
-      <div>
-        <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
-          <svg class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
-          </svg>
-        </div>
-        <div class="mt-3 text-center sm:mt-5">
-          <h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title">
-            <i18n.Translate>Withdrawal confirmed</i18n.Translate>
-          </h3>
-          <div class="mt-2">
-            <p class="text-sm text-gray-500">
-              <i18n.Translate>
-                The wire transfer to the Taler operator has been initiated. You will soon receive the requested amount in your Taler wallet.
-              </i18n.Translate>
-            </p>
+    return (
+      <div class="relative ml-auto mr-auto transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
+        <div>
+          <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+            <svg
+              class="h-6 w-6 text-green-600"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M4.5 12.75l6 6 9-13.5"
+              />
+            </svg>
+          </div>
+          <div class="mt-3 text-center sm:mt-5">
+            <h3
+              class="text-base font-semibold leading-6 text-gray-900"
+              id="modal-title"
+            >
+              <i18n.Translate>Withdrawal confirmed</i18n.Translate>
+            </h3>
+            <div class="mt-2">
+              <p class="text-sm text-gray-500">
+                <i18n.Translate>
+                  The wire transfer to the Taler operator has been initiated.
+                  You will soon receive the requested amount in your Taler
+                  wallet.
+                </i18n.Translate>
+              </p>
+            </div>
           </div>
         </div>
+        <div class="mt-5 sm:mt-6">
+          <a
+            href={routeClose.url({})}
+            class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+          >
+            <i18n.Translate>Done</i18n.Translate>
+          </a>
+        </div>
       </div>
-      <div class="mt-5 sm:mt-6">
-        <button type="button"
-          class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-          onClick={async (e) => {
-            e.preventDefault();
-            onClose()
-          }}>
-          <i18n.Translate>Done</i18n.Translate>
-        </button>
-      </div>
-    </div>
-
-
+    );
   }
   if (data.status === "pending") {
     return (
@@ -136,33 +156,55 @@ export function WithdrawalQRCode({
         withdrawUri={withdrawUri}
         onAborted={() => {
           notifyInfo(i18n.str`Operation canceled`);
-          onClose()
+          onOperationAborted();
         }}
       />
     );
   }
 
-  const account = !data.selected_exchange_account ? undefined : parsePaytoUri(data.selected_exchange_account)
+  const account = !data.selected_exchange_account
+    ? undefined
+    : parsePaytoUri(data.selected_exchange_account);
 
   if (!data.selected_reserve_pub && account) {
-    return <Attention type="danger"
-      title={i18n.str`The operation is marked as 'selected' but some step in the withdrawal failed`} >
-      <i18n.Translate>The account is selected but no withdrawal identification found.</i18n.Translate>
-    </Attention>
+    return (
+      <Attention
+        type="danger"
+        title={i18n.str`The operation is marked as 'selected' but some step in the withdrawal failed`}
+      >
+        <i18n.Translate>
+          The account is selected but no withdrawal identification found.
+        </i18n.Translate>
+      </Attention>
+    );
   }
 
   if (!account && data.selected_reserve_pub) {
-    return <Attention type="danger"
-      title={i18n.str`The operation is marked as 'selected' but some step in the withdrawal failed`}>
-      <i18n.Translate>There is a withdrawal identification but no account has been selected or the selected account is invalid.</i18n.Translate>
-    </Attention>
+    return (
+      <Attention
+        type="danger"
+        title={i18n.str`The operation is marked as 'selected' but some step in the withdrawal failed`}
+      >
+        <i18n.Translate>
+          There is a withdrawal identification but no account has been selected
+          or the selected account is invalid.
+        </i18n.Translate>
+      </Attention>
+    );
   }
 
   if (!account || !data.selected_reserve_pub) {
-    return <Attention type="danger"
-      title={i18n.str`The operation is marked as 'selected' but some step in the withdrawal failed`}>
-      <i18n.Translate>No withdrawal ID found and no account has been selected or the selected account is invalid.</i18n.Translate>
-    </Attention>
+    return (
+      <Attention
+        type="danger"
+        title={i18n.str`The operation is marked as 'selected' but some step in the withdrawal failed`}
+      >
+        <i18n.Translate>
+          No withdrawal ID found and no account has been selected or the
+          selected account is invalid.
+        </i18n.Translate>
+      </Attention>
+    );
   }
 
   return (
@@ -172,53 +214,71 @@ export function WithdrawalQRCode({
         username: data.username,
         account,
         reserve: data.selected_reserve_pub,
-        amount: Amounts.parseOrThrow(data.amount)
+        amount: Amounts.parseOrThrow(data.amount),
       }}
       onAuthorizationRequired={onAuthorizationRequired}
       onAborted={() => {
         notifyInfo(i18n.str`Operation canceled`);
-        onClose()
+        onOperationAborted();
       }}
     />
   );
 }
 
-
-export function OperationNotFound({ onClose }: { onClose: (() => void) | undefined }): VNode {
+export function OperationNotFound({
+  routeClose,
+}: {
+  routeClose: RouteDefinition<Record<string, never>> | undefined;
+}): VNode {
   const { i18n } = useTranslationContext();
-  return <div class="relative ml-auto mr-auto transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
-    <div>
-      <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100 ">
-        <svg class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
-        </svg>
-      </div>
+  return (
+    <div class="relative ml-auto mr-auto transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
+      <div>
+        <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100 ">
+          <svg
+            class="h-6 w-6 text-red-600"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+            />
+          </svg>
+        </div>
 
-      <div class="mt-3 text-center sm:mt-5">
-        <h3 class="text-base font-semibold leading-6 text-gray-900" id="modal-title">
-          <i18n.Translate>Operation not found</i18n.Translate>
-        </h3>
-        <div class="mt-2">
-          <p class="text-sm text-gray-500">
-            <i18n.Translate>
-              This operation is not known by the server. The operation id is wrong or the
-              server deleted the operation information before reaching here.
-            </i18n.Translate>
-          </p>
+        <div class="mt-3 text-center sm:mt-5">
+          <h3
+            class="text-base font-semibold leading-6 text-gray-900"
+            id="modal-title"
+          >
+            <i18n.Translate>Operation not found</i18n.Translate>
+          </h3>
+          <div class="mt-2">
+            <p class="text-sm text-gray-500">
+              <i18n.Translate>
+                This operation is not known by the server. The operation id is
+                wrong or the server deleted the operation information before
+                reaching here.
+              </i18n.Translate>
+            </p>
+          </div>
         </div>
       </div>
+      {routeClose && (
+        <div class="mt-5 sm:mt-6">
+          <a
+            href={routeClose.url({})}
+            class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+          >
+            <i18n.Translate>Cotinue to dashboard</i18n.Translate>
+          </a>
+        </div>
+      )}
     </div>
-    {onClose &&
-      <div class="mt-5 sm:mt-6">
-        <button type="button"
-          class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-          onClick={async (e) => {
-            e.preventDefault();
-            onClose()
-          }}>
-          <i18n.Translate>Cotinue to dashboard</i18n.Translate>
-        </button>
-      </div>
-    }
-  </div>
-}
\ No newline at end of file
+  );
+}