many changes

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

1 files changed, 205 insertions, 162 deletions

diff --git a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
index c3d1c3f7e..1e48b818a 100644
--- a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
+++ b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
@@ -18,59 +18,73 @@ import {
   AmountJson,
   Amounts,
   HttpStatusCode,
-  Logger,
   TranslatedString,
-  parseWithdrawUri
+  assertUnreachable,
+  parseWithdrawUri,
 } from "@gnu-taler/taler-util";
 import {
+  Attention,
+  LocalNotificationBanner,
   notifyError,
   useLocalNotification,
-  useTranslationContext
+  useTranslationContext,
 } from "@gnu-taler/web-util/browser";
-import { Fragment, VNode, h } from "preact";
+import { VNode, h } from "preact";
 import { forwardRef } from "preact/compat";
 import { useState } from "preact/hooks";
-import { Attention } from "@gnu-taler/web-util/browser";
+import { privatePages } from "../Routing.js";
 import { useBankCoreApiContext } from "../context/config.js";
 import { useBackendState } from "../hooks/backend.js";
+import { useBankState } from "../hooks/bank-state.js";
 import { usePreferences } from "../hooks/preferences.js";
-import { undefinedIfEmpty, withRuntimeErrorHandling } from "../utils.js";
+import { RouteDefinition } from "../route.js";
+import { undefinedIfEmpty } from "../utils.js";
 import { OperationState } from "./OperationState/index.js";
 import { InputAmount, doAutoFocus } from "./PaytoWireTransferForm.js";
-import { assertUnreachable } from "./WithdrawalOperationPage.js";
-import { LocalNotificationBanner } from "@gnu-taler/web-util/browser";
-import { useBankState } from "../hooks/bank-state.js";
 
-const logger = new Logger("WalletWithdrawForm");
 const RefAmount = forwardRef(InputAmount);
 
-
-function OldWithdrawalForm({ goToConfirmOperation, limit, onCancel, focus }: {
+function OldWithdrawalForm({
+  onOperationCreated,
+  limit,
+  routeCancel,
+  focus,
+}: {
   limit: AmountJson;
   focus?: boolean;
-  goToConfirmOperation: (operationId: string) => void;
-  onCancel: () => void;
+  onOperationCreated: (wopid: string) => void;
+  routeCancel: RouteDefinition<Record<string, never>>;
 }): VNode {
   const { i18n } = useTranslationContext();
-  const [settings] = usePreferences()
+  const [settings] = usePreferences();
   const [bankState, updateBankState] = useBankState();
 
   const { state: credentials } = useBackendState();
-  const creds = credentials.status !== "loggedIn" ? undefined : credentials
+  const creds = credentials.status !== "loggedIn" ? undefined : credentials;
 
-  const { api } = useBankCoreApiContext()
-  const [amountStr, setAmountStr] = useState<string | undefined>(`${settings.maxWithdrawalAmount}`);
-  const [notification, notify, handleError] = useLocalNotification()
-
-  if (!!bankState.currentWithdrawalOperationId) {
-    return <Attention type="warning" title={i18n.str`There is an operation already`}>
-      <span ref={focus ? doAutoFocus : undefined} />
-      <i18n.Translate>
-        Complete or cancel the operation in</i18n.Translate> <a class="font-semibold text-yellow-700 hover:text-yellow-600" href={`#/operation/${bankState.currentWithdrawalOperationId}`}>
-        <i18n.Translate>this page</i18n.Translate>
-      </a>
+  const { api } = useBankCoreApiContext();
+  const [amountStr, setAmountStr] = useState<string | undefined>(
+    `${settings.maxWithdrawalAmount}`,
+  );
+  const [notification, notify, handleError] = useLocalNotification();
 
-    </Attention>
+  if (bankState.currentWithdrawalOperationId) {
+    return (
+      <Attention type="warning" title={i18n.str`There is an operation already`}>
+        <span ref={focus ? doAutoFocus : undefined} />
+        <i18n.Translate>
+          Complete or cancel the operation in
+        </i18n.Translate>{" "}
+        <a
+          class="font-semibold text-yellow-700 hover:text-yellow-600"
+          href={privatePages.operationDetails.url({
+            wopid: bankState.currentWithdrawalOperationId,
+          })}
+        >
+          <i18n.Translate>this page</i18n.Translate>
+        </a>
+      </Attention>
+    );
   }
 
   const trimmedAmountStr = amountStr?.trim();
@@ -101,10 +115,14 @@ function OldWithdrawalForm({ goToConfirmOperation, limit, onCancel, focus }: {
         if (!uri) {
           return notifyError(
             i18n.str`Server responded with an invalid  withdraw URI`,
-            i18n.str`Withdraw URI: ${resp.body.taler_withdraw_uri}`);
+            i18n.str`Withdraw URI: ${resp.body.taler_withdraw_uri}`,
+          );
         } else {
-          updateBankState("currentWithdrawalOperationId", uri.withdrawalOperationId)
-          goToConfirmOperation(uri.withdrawalOperationId);
+          updateBankState(
+            "currentWithdrawalOperationId",
+            uri.withdrawalOperationId,
+          );
+          onOperationCreated(uri.withdrawalOperationId);
         }
       } else {
         switch (resp.case) {
@@ -114,7 +132,7 @@ function OldWithdrawalForm({ goToConfirmOperation, limit, onCancel, focus }: {
               title: i18n.str`The operation was rejected due to insufficient funds`,
               description: resp.detail.hint as TranslatedString,
               debug: resp.detail,
-            })
+            });
             break;
           }
           case HttpStatusCode.Unauthorized: {
@@ -123,7 +141,7 @@ function OldWithdrawalForm({ goToConfirmOperation, limit, onCancel, focus }: {
               title: i18n.str`The operation was rejected due to insufficient funds`,
               description: resp.detail.hint as TranslatedString,
               debug: resp.detail,
-            })
+            });
             break;
           }
           case HttpStatusCode.NotFound: {
@@ -132,159 +150,184 @@ function OldWithdrawalForm({ goToConfirmOperation, limit, onCancel, focus }: {
               title: i18n.str`Account not found`,
               description: resp.detail.hint as TranslatedString,
               debug: resp.detail,
-            })
+            });
             break;
           }
-          default: assertUnreachable(resp)
+          default:
+            assertUnreachable(resp);
         }
       }
-    })
+    });
   }
 
-  return <form
-    class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2 mt-4"
-    autoCapitalize="none"
-    autoCorrect="off"
-    onSubmit={e => {
-      e.preventDefault()
-    }}
-  >
-    <LocalNotificationBanner notification={notification} />
+  return (
+    <form
+      class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2 mt-4"
+      autoCapitalize="none"
+      autoCorrect="off"
+      onSubmit={(e) => {
+        e.preventDefault();
+      }}
+    >
+      <LocalNotificationBanner notification={notification} />
 
-    <div class="px-4 py-6 ">
-      <div class="grid max-w-xs grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
-        <div class="sm:col-span-5">
-          <label for="withdraw-amount">{i18n.str`Amount`}</label>
-          <RefAmount
-            currency={limit.currency}
-            value={amountStr}
-            name="withdraw-amount"
-            onChange={(v) => {
-              setAmountStr(v);
-            }}
-            error={errors?.amount}
-            ref={focus ? doAutoFocus : undefined}
-          />
+      <div class="px-4 py-6 ">
+        <div class="grid max-w-xs grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+          <div class="sm:col-span-5">
+            <label for="withdraw-amount">{i18n.str`Amount`}</label>
+            <RefAmount
+              currency={limit.currency}
+              value={amountStr}
+              name="withdraw-amount"
+              onChange={(v) => {
+                setAmountStr(v);
+              }}
+              error={errors?.amount}
+              ref={focus ? doAutoFocus : undefined}
+            />
+          </div>
         </div>
-      </div>
-      <div class="mt-4">
-        <div class="sm:inline">
-
-          <button type="button"
-            class="               inline-flex px-6 py-4 text-sm items-center rounded-l-md bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
-            onClick={(e) => {
-              e.preventDefault();
-              setAmountStr("50.00")
-            }}
-          >
-            50.00
-          </button>
-          <button type="button"
-            class=" -ml-px -mr-px inline-flex px-6 py-4 text-sm items-center rounded-r-md sm:rounded-none             bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
-            onClick={(e) => {
-              e.preventDefault();
-              setAmountStr("25.00")
-            }}
-          >
-
-            25.00
-          </button>
-        </div>
-        <div class="mt-4 sm:inline">
-          <button type="button"
-            class=" -ml-px -mr-px inline-flex px-6 py-4 text-sm items-center rounded-l-md sm:rounded-none             bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
-            onClick={(e) => {
-              e.preventDefault();
-              setAmountStr("10.00")
-            }}
-          >
-            10.00
-          </button>
-          <button type="button"
-            class="               inline-flex px-6 py-4 text-sm items-center rounded-r-md bg-white  text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
-            onClick={(e) => {
-              e.preventDefault();
-              setAmountStr("5.00")
-            }}
-          >
-            5.00
-          </button>
+        <div class="mt-4">
+          <div class="sm:inline">
+            <button
+              type="button"
+              class="               inline-flex px-6 py-4 text-sm items-center rounded-l-md bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+              onClick={(e) => {
+                e.preventDefault();
+                setAmountStr("50.00");
+              }}
+            >
+              50.00
+            </button>
+            <button
+              type="button"
+              class=" -ml-px -mr-px inline-flex px-6 py-4 text-sm items-center rounded-r-md sm:rounded-none             bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+              onClick={(e) => {
+                e.preventDefault();
+                setAmountStr("25.00");
+              }}
+            >
+              25.00
+            </button>
+          </div>
+          <div class="mt-4 sm:inline">
+            <button
+              type="button"
+              class=" -ml-px -mr-px inline-flex px-6 py-4 text-sm items-center rounded-l-md sm:rounded-none             bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+              onClick={(e) => {
+                e.preventDefault();
+                setAmountStr("10.00");
+              }}
+            >
+              10.00
+            </button>
+            <button
+              type="button"
+              class="               inline-flex px-6 py-4 text-sm items-center rounded-r-md bg-white  text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+              onClick={(e) => {
+                e.preventDefault();
+                setAmountStr("5.00");
+              }}
+            >
+              5.00
+            </button>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="flex items-center justify-between gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8">
-      <button type="button" class="text-sm font-semibold leading-6 text-gray-900"
-        onClick={onCancel}
-      >
-        <i18n.Translate>Cancel</i18n.Translate></button>
-      <button type="submit"
-        class="disabled:opacity-50 disabled:cursor-default cursor-pointer 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"
-        // disabled={isRawPayto ? !!errorsPayto : !!errorsWire}
-        onClick={(e) => {
-          e.preventDefault()
-          doStart()
-        }}
-      >
-        <i18n.Translate>Continue</i18n.Translate>
-      </button>
-    </div>
-
-  </form>
+      <div class="flex items-center justify-between gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8">
+        <a
+          href={routeCancel.url({})}
+          class="text-sm font-semibold leading-6 text-gray-900"
+        >
+          <i18n.Translate>Cancel</i18n.Translate>
+        </a>
+        <button
+          type="submit"
+          class="disabled:opacity-50 disabled:cursor-default cursor-pointer 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"
+          // disabled={isRawPayto ? !!errorsPayto : !!errorsWire}
+          onClick={(e) => {
+            e.preventDefault();
+            doStart();
+          }}
+        >
+          <i18n.Translate>Continue</i18n.Translate>
+        </button>
+      </div>
+    </form>
+  );
 }
 
-
 export function WalletWithdrawForm({
   focus,
   limit,
-  onCancel,
+  routeCancel,
   onAuthorizationRequired,
-  goToConfirmOperation,
+  onOperationCreated,
+  onOperationAborted,
 }: {
   limit: AmountJson;
   focus?: boolean;
-  onAuthorizationRequired: () => void,
-  goToConfirmOperation: (operationId: string) => void;
-  onCancel: () => void;
+  onAuthorizationRequired: () => void;
+  onOperationCreated: (wopid: string) => void;
+  onOperationAborted: () => void;
+  routeCancel: RouteDefinition<Record<string, never>>;
 }): VNode {
   const { i18n } = useTranslationContext();
-  const [settings, updateSettings] = usePreferences()
+  const [settings, updateSettings] = usePreferences();
 
-  return (<div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg">
-    <div class="px-4 sm:px-0">
-      <h2 class="text-base font-semibold leading-7 text-gray-900"><i18n.Translate>Prepare your wallet</i18n.Translate></h2>
-      <p class="mt-1 text-sm text-gray-500">
-        <i18n.Translate>After using your wallet you will need to confirm or cancel the operation on this site.</i18n.Translate>
-      </p>
-    </div>
-
-    <div class="col-span-2">
-      {settings.showInstallWallet &&
-        <Attention title={i18n.str`You need a GNU Taler Wallet`} onClose={() => {
-          updateSettings("showInstallWallet", false);
-        }}>
+  return (
+    <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3 bg-gray-100 my-4 px-4 pb-4 rounded-lg">
+      <div class="px-4 sm:px-0">
+        <h2 class="text-base font-semibold leading-7 text-gray-900">
+          <i18n.Translate>Prepare your wallet</i18n.Translate>
+        </h2>
+        <p class="mt-1 text-sm text-gray-500">
           <i18n.Translate>
-            If you don't have one yet you can follow the instruction in</i18n.Translate> <a target="_blank" rel="noreferrer noopener" class="font-semibold text-blue-700 hover:text-blue-600" href="https://taler.net/en/wallet.html">
-            <i18n.Translate>this page</i18n.Translate>
-          </a>
-        </Attention>
-      }
+            After using your wallet you will need to confirm or cancel the
+            operation on this site.
+          </i18n.Translate>
+        </p>
+      </div>
 
-      {!settings.fastWithdrawal ?
-        <OldWithdrawalForm
-          focus={focus}
-          limit={limit}
-          onCancel={onCancel}
-          goToConfirmOperation={goToConfirmOperation}
-        />
-        :
-        <OperationState
-          currency={limit.currency}
-          onAuthorizationRequired={onAuthorizationRequired}
-          onClose={onCancel}
-        />
-      }
+      <div class="col-span-2">
+        {settings.showInstallWallet && (
+          <Attention
+            title={i18n.str`You need a GNU Taler Wallet`}
+            onClose={() => {
+              updateSettings("showInstallWallet", false);
+            }}
+          >
+            <i18n.Translate>
+              If you don't have one yet you can follow the instruction in
+            </i18n.Translate>{" "}
+            <a
+              target="_blank"
+              rel="noreferrer noopener"
+              class="font-semibold text-blue-700 hover:text-blue-600"
+              href="https://taler.net/en/wallet.html"
+            >
+              <i18n.Translate>this page</i18n.Translate>
+            </a>
+          </Attention>
+        )}
+
+        {!settings.fastWithdrawal ? (
+          <OldWithdrawalForm
+            focus={focus}
+            limit={limit}
+            routeCancel={routeCancel}
+            onOperationCreated={onOperationCreated}
+          />
+        ) : (
+          <OperationState
+            currency={limit.currency}
+            onAuthorizationRequired={onAuthorizationRequired}
+            routeClose={routeCancel}
+            onAbort={onOperationAborted}
+            // route={routeCancel}
+          />
+        )}
+      </div>
     </div>
-  </div>
   );
 }
-