obs and cancel request, plus lint

5 files changed, 123 insertions, 101 deletions

diff --git a/packages/bank-ui/src/components/Cashouts/views.tsx b/packages/bank-ui/src/components/Cashouts/views.tsx
index 7f16d5840..22b8d8c1b 100644
--- a/packages/bank-ui/src/components/Cashouts/views.tsx
+++ b/packages/bank-ui/src/components/Cashouts/views.tsx
@@ -17,7 +17,6 @@
 import {
   AbsoluteTime,
   Amounts,
-  Duration,
   HttpStatusCode,
   TalerError,
   assertUnreachable,
@@ -32,19 +31,19 @@ import { Fragment, VNode, h } from "preact";
 import { useConversionInfo } from "../../hooks/regional.js";
 import { RenderAmount } from "../../pages/PaytoWireTransferForm.js";
 import { ErrorLoadingWithDebug } from "../ErrorLoadingWithDebug.js";
-import { State } from "./index.js";
 import { Time } from "../Time.js";
+import { State } from "./index.js";
 
 export function FailedView({ error }: State.Failed) {
   const { i18n } = useTranslationContext();
   switch (error.case) {
     case HttpStatusCode.NotImplemented: {
       return (
-        <Attention
-          type="danger"
-          title={i18n.str`Cashout are disabled`}
-        >
-          <i18n.Translate>Cashout should be enable by configuration and the conversion rate should be initialized with fee, ratio and rounding mode.</i18n.Translate>
+        <Attention type="danger" title={i18n.str`Cashout are disabled`}>
+          <i18n.Translate>
+            Cashout should be enable by configuration and the conversion rate
+            should be initialized with fee, ratio and rounding mode.
+          </i18n.Translate>
         </Attention>
       );
     }
@@ -69,11 +68,11 @@ export function ReadyView({
     switch (resp.case) {
       case HttpStatusCode.NotImplemented: {
         return (
-          <Attention
-            type="danger"
-            title={i18n.str`Cashout are disabled`}
-          >
-            <i18n.Translate>Cashout should be enable by configuration and the conversion rate should be initialized with fee, ratio and rounding mode.</i18n.Translate>
+          <Attention type="danger" title={i18n.str`Cashout are disabled`}>
+            <i18n.Translate>
+              Cashout should be enable by configuration and the conversion rate
+              should be initialized with fee, ratio and rounding mode.
+            </i18n.Translate>
           </Attention>
         );
       }
@@ -89,8 +88,8 @@ export function ReadyView({
         cur.creation_time.t_s === "never"
           ? ""
           : format(cur.creation_time.t_s * 1000, "dd/MM/yyyy", {
-            locale: dateLocale,
-          });
+              locale: dateLocale,
+            });
       if (!prev[d]) {
         prev[d] = [];
       }
@@ -156,9 +155,12 @@ export function ReadyView({
                       >
                         <td class="relative py-2 pl-2 pr-2 text-sm ">
                           <div class="font-medium text-gray-900">
-                            <Time format="HH:mm:ss"
-                              timestamp={AbsoluteTime.fromProtocolTimestamp(item.creation_time)}
-                            // relative={Duration.fromSpec({ days: 1 })} 
+                            <Time
+                              format="HH:mm:ss"
+                              timestamp={AbsoluteTime.fromProtocolTimestamp(
+                                item.creation_time,
+                              )}
+                              // relative={Duration.fromSpec({ days: 1 })}
                             />
                           </div>
                           {
@@ -200,7 +202,6 @@ export function ReadyView({
                         </td>
 
                         <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500 break-all min-w-md">
-
                           {item.subject}
                         </td>
                       </a>
diff --git a/packages/bank-ui/src/components/Time.tsx b/packages/bank-ui/src/components/Time.tsx
index 39ce33f60..5c8afe212 100644
--- a/packages/bank-ui/src/components/Time.tsx
+++ b/packages/bank-ui/src/components/Time.tsx
@@ -1,6 +1,6 @@
 /*
  This file is part of GNU Taler
- (C) 2022 Taler Systems S.A.
+ (C) 2022-2024 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
@@ -16,16 +16,21 @@
 
 import { AbsoluteTime, Duration } from "@gnu-taler/taler-util";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
-import { formatISO, format, formatDuration, intervalToDuration } from "date-fns";
+import {
+  formatISO,
+  format,
+  formatDuration,
+  intervalToDuration,
+} from "date-fns";
 import { Fragment, h, VNode } from "preact";
 
 /**
- * 
+ *
  * @param timestamp time to be formatted
  * @param relative duration threshold, if the difference is lower
  * the timestamp will be formatted as relative time from "now"
- * 
- * @returns 
+ *
+ * @returns
  */
 export function Time({
   timestamp,
@@ -33,34 +38,38 @@ export function Time({
   format: formatString,
 }: {
   timestamp: AbsoluteTime | undefined;
-  relative?: Duration,
+  relative?: Duration;
   format: string;
 }): VNode {
-  const { i18n, dateLocale } = useTranslationContext()
-  if (!timestamp) return <Fragment />
+  const { i18n, dateLocale } = useTranslationContext();
+  if (!timestamp) return <Fragment />;
 
   if (timestamp.t_ms === "never") {
-    return <time >{i18n.str`never`}</time>
+    return <time>{i18n.str`never`}</time>;
   }
 
   const now = AbsoluteTime.now();
-  const diff = AbsoluteTime.difference(now, timestamp)
+  const diff = AbsoluteTime.difference(now, timestamp);
   if (relative && now.t_ms !== "never" && Duration.cmp(diff, relative) === -1) {
     const d = intervalToDuration({
       start: now.t_ms,
-      end: timestamp.t_ms
-    })
-    d.seconds = 0
-    const duration = formatDuration(d, { locale: dateLocale })
-    const isFuture = AbsoluteTime.cmp(now, timestamp) < 0
+      end: timestamp.t_ms,
+    });
+    d.seconds = 0;
+    const duration = formatDuration(d, { locale: dateLocale });
+    const isFuture = AbsoluteTime.cmp(now, timestamp) < 0;
     if (isFuture) {
-      return <time dateTime={formatISO(timestamp.t_ms)}>
-        <i18n.Translate>in {duration}</i18n.Translate>
-      </time>
+      return (
+        <time dateTime={formatISO(timestamp.t_ms)}>
+          <i18n.Translate>in {duration}</i18n.Translate>
+        </time>
+      );
     } else {
-      return <time dateTime={formatISO(timestamp.t_ms)}>
-        <i18n.Translate>{duration} ago</i18n.Translate>
-      </time>
+      return (
+        <time dateTime={formatISO(timestamp.t_ms)}>
+          <i18n.Translate>{duration} ago</i18n.Translate>
+        </time>
+      );
     }
   }
   return (
diff --git a/packages/bank-ui/src/components/Transactions/index.ts b/packages/bank-ui/src/components/Transactions/index.ts
index c8bb1e108..4cad6f306 100644
--- a/packages/bank-ui/src/components/Transactions/index.ts
+++ b/packages/bank-ui/src/components/Transactions/index.ts
@@ -23,11 +23,13 @@ import { RouteDefinition } from "../../route.js";
 
 export interface Props {
   account: string;
-  routeCreateWireTransfer: RouteDefinition<{
-    account?: string,
-    subject?: string,
-    amount?: string,
-  }> | undefined;
+  routeCreateWireTransfer:
+    | RouteDefinition<{
+        account?: string;
+        subject?: string;
+        amount?: string;
+      }>
+    | undefined;
 }
 
 export type State = State.Loading | State.LoadingUriError | State.Ready;
@@ -49,11 +51,13 @@ export namespace State {
   export interface Ready extends BaseInfo {
     status: "ready";
     error: undefined;
-    routeCreateWireTransfer: RouteDefinition<{
-      account?: string,
-      subject?: string,
-      amount?: string,
-    }> | undefined;
+    routeCreateWireTransfer:
+      | RouteDefinition<{
+          account?: string;
+          subject?: string;
+          amount?: string;
+        }>
+      | undefined;
     transactions: Transaction[];
     onGoStart?: () => void;
     onGoNext?: () => void;
diff --git a/packages/bank-ui/src/components/Transactions/state.ts b/packages/bank-ui/src/components/Transactions/state.ts
index 3e9103b59..e792ddfa0 100644
--- a/packages/bank-ui/src/components/Transactions/state.ts
+++ b/packages/bank-ui/src/components/Transactions/state.ts
@@ -23,7 +23,10 @@ import {
 import { useTransactions } from "../../hooks/account.js";
 import { Props, State, Transaction } from "./index.js";
 
-export function useComponentState({ account, routeCreateWireTransfer }: Props): State {
+export function useComponentState({
+  account,
+  routeCreateWireTransfer,
+}: Props): State {
   const txResult = useTransactions(account);
   if (!txResult) {
     return {
@@ -38,36 +41,35 @@ export function useComponentState({ account, routeCreateWireTransfer }: Props):
     };
   }
 
-  const transactions =
-      txResult.result
-        .map((tx) => {
-          const negative = tx.direction === "debit";
-          const cp = parsePaytoUri(
-            negative ? tx.creditor_payto_uri : tx.debtor_payto_uri,
-          );
-          const counterpart =
-            (cp === undefined || !cp.isKnown
-              ? undefined
-              : cp.targetType === "iban"
-                ? cp.iban
-                : cp.targetType === "x-taler-bank"
-                  ? cp.account
-                  : cp.targetType === "bitcoin"
-                    ? `${cp.targetPath.substring(0, 6)}...`
-                    : undefined) ?? "unknown";
+  const transactions = txResult.result
+    .map((tx) => {
+      const negative = tx.direction === "debit";
+      const cp = parsePaytoUri(
+        negative ? tx.creditor_payto_uri : tx.debtor_payto_uri,
+      );
+      const counterpart =
+        (cp === undefined || !cp.isKnown
+          ? undefined
+          : cp.targetType === "iban"
+            ? cp.iban
+            : cp.targetType === "x-taler-bank"
+              ? cp.account
+              : cp.targetType === "bitcoin"
+                ? `${cp.targetPath.substring(0, 6)}...`
+                : undefined) ?? "unknown";
 
-          const when = AbsoluteTime.fromProtocolTimestamp(tx.date);
-          const amount = Amounts.parse(tx.amount);
-          const subject = tx.subject;
-          return {
-            negative,
-            counterpart,
-            when,
-            amount,
-            subject,
-          };
-        })
-        .filter((x): x is Transaction => x !== undefined);
+      const when = AbsoluteTime.fromProtocolTimestamp(tx.date);
+      const amount = Amounts.parse(tx.amount);
+      const subject = tx.subject;
+      return {
+        negative,
+        counterpart,
+        when,
+        amount,
+        subject,
+      };
+    })
+    .filter((x): x is Transaction => x !== undefined);
 
   return {
     status: "ready",
diff --git a/packages/bank-ui/src/components/Transactions/views.tsx b/packages/bank-ui/src/components/Transactions/views.tsx
index 7da9fc5a9..417b34c71 100644
--- a/packages/bank-ui/src/components/Transactions/views.tsx
+++ b/packages/bank-ui/src/components/Transactions/views.tsx
@@ -19,9 +19,8 @@ import { format } from "date-fns";
 import { Fragment, VNode, h } from "preact";
 import { useBankCoreApiContext } from "../../context/config.js";
 import { RenderAmount } from "../../pages/PaytoWireTransferForm.js";
-import { State } from "./index.js";
-import { Duration } from "@gnu-taler/taler-util";
 import { Time } from "../Time.js";
+import { State } from "./index.js";
 
 export function ReadyView({
   transactions,
@@ -30,24 +29,26 @@ export function ReadyView({
   onGoStart,
 }: State.Ready): VNode {
   const { i18n, dateLocale } = useTranslationContext();
-  const { config } = useBankCoreApiContext()
+  const { config } = useBankCoreApiContext();
 
   if (!transactions.length) {
-    return <div class="px-4 mt-4">
-      <div class="sm:flex sm:items-center">
-        <div class="sm:flex-auto">
-          <h1 class="text-base font-semibold leading-6 text-gray-900">
-            <i18n.Translate>Transactions history</i18n.Translate>
-          </h1>
+    return (
+      <div class="px-4 mt-4">
+        <div class="sm:flex sm:items-center">
+          <div class="sm:flex-auto">
+            <h1 class="text-base font-semibold leading-6 text-gray-900">
+              <i18n.Translate>Transactions history</i18n.Translate>
+            </h1>
+          </div>
         </div>
-      </div>
 
-      <Attention type="low" title={i18n.str`No transactions yet.`}>
-        <i18n.Translate>
-          You can start sending a wire transfer or withdrawing to your wallet.
-        </i18n.Translate>
-      </Attention>
-    </div>;
+        <Attention type="low" title={i18n.str`No transactions yet.`}>
+          <i18n.Translate>
+            You can start sending a wire transfer or withdrawing to your wallet.
+          </i18n.Translate>
+        </Attention>
+      </div>
+    );
   }
 
   const txByDate = transactions.reduce(
@@ -116,9 +117,10 @@ export function ReadyView({
                       >
                         <td class="relative py-2 pl-2 pr-2 text-sm ">
                           <div class="font-medium text-gray-900">
-                            <Time format="HH:mm:ss"
+                            <Time
+                              format="HH:mm:ss"
                               timestamp={item.when}
-                            // relative={Duration.fromSpec({ days: 1 })} 
+                              // relative={Duration.fromSpec({ days: 1 })}
                             />
                           </div>
                           <dl class="font-normal sm:hidden">
@@ -153,7 +155,9 @@ export function ReadyView({
                             </dt>
                             <dd class="mt-1 truncate text-gray-500 sm:hidden">
                               {item.negative ? i18n.str`to` : i18n.str`from`}{" "}
-                              {!routeCreateWireTransfer ? item.counterpart :
+                              {!routeCreateWireTransfer ? (
+                                item.counterpart
+                              ) : (
                                 <a
                                   name={`transfer to ${item.counterpart}`}
                                   href={routeCreateWireTransfer.url({
@@ -163,7 +167,7 @@ export function ReadyView({
                                 >
                                   {item.counterpart}
                                 </a>
-                              }
+                              )}
                             </dd>
                             <dd class="mt-1 text-gray-500 sm:hidden">
                               <pre class="break-words w-56 whitespace-break-spaces p-2 rounded-md mx-auto my-2 bg-gray-100">
@@ -190,7 +194,9 @@ export function ReadyView({
                           )}
                         </td>
                         <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500">
-                          {!routeCreateWireTransfer ? item.counterpart :
+                          {!routeCreateWireTransfer ? (
+                            item.counterpart
+                          ) : (
                             <a
                               name={`wire transfer to ${item.counterpart}`}
                               href={routeCreateWireTransfer.url({
@@ -200,7 +206,7 @@ export function ReadyView({
                             >
                               {item.counterpart}
                             </a>
-                          }
+                          )}
                         </td>
                         <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500 break-all min-w-md">
                           {item.subject}