pretty

14 files changed, 320 insertions, 271 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/index.ts b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/index.ts
index 2adcc9f74..94020069b 100644
--- a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/index.ts
+++ b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/index.ts
@@ -14,22 +14,21 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import {
-  TalerErrorDetail
-} from "@gnu-taler/taler-util";
+import { TalerErrorDetail } from "@gnu-taler/taler-util";
 import { SyncTermsOfServiceResponse } from "@gnu-taler/taler-wallet-core";
 import { Loading } from "../../components/Loading.js";
 import { HookError } from "../../hooks/useAsyncAsHook.js";
 import {
   ButtonHandler,
   TextFieldHandler,
-  ToggleHandler
+  ToggleHandler,
 } from "../../mui/handlers.js";
 import { compose, StateViewMap } from "../../utils/index.js";
 import { useComponentState } from "./state.js";
 import {
-  ConfirmProviderView, LoadingUriView,
-  SelectProviderView
+  ConfirmProviderView,
+  LoadingUriView,
+  SelectProviderView,
 } from "./views.js";
 
 export interface Props {
diff --git a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/state.ts b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/state.ts
index 271a1bf98..32c48be91 100644
--- a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/state.ts
+++ b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/state.ts
@@ -17,11 +17,11 @@
 import {
   canonicalizeBaseUrl,
   Codec,
-  TalerErrorDetail
+  TalerErrorDetail,
 } from "@gnu-taler/taler-util";
 import {
   codecForSyncTermsOfServiceResponse,
-  WalletApiOperation
+  WalletApiOperation,
 } from "@gnu-taler/taler-wallet-core";
 import { useEffect, useState } from "preact/hooks";
 import { useBackendContext } from "../../context/backend.js";
@@ -106,47 +106,50 @@ function useUrlState<T>(
     constHref == undefined
       ? undefined
       : async () => {
-        const req = await fetch(constHref).catch((e) => {
-          return setState({
-            status: "network-error",
-            href: constHref,
+          const req = await fetch(constHref).catch((e) => {
+            return setState({
+              status: "network-error",
+              href: constHref,
+            });
           });
-        });
-        if (!req) return;
+          if (!req) return;
 
-        if (req.status >= 400 && req.status < 500) {
-          setState({
-            status: "client-error",
-            code: req.status,
-          });
-          return;
-        }
-        if (req.status > 500) {
-          setState({
-            status: "server-error",
-            code: req.status,
-          });
-          return;
-        }
+          if (req.status >= 400 && req.status < 500) {
+            setState({
+              status: "client-error",
+              code: req.status,
+            });
+            return;
+          }
+          if (req.status > 500) {
+            setState({
+              status: "server-error",
+              code: req.status,
+            });
+            return;
+          }
 
-        const json = await req.json();
-        try {
-          const result = codec.decode(json);
-          setState({ status: "ok", result });
-        } catch (e: any) {
-          setState({ status: "parsing-error", json });
-        }
-      },
+          const json = await req.json();
+          try {
+            const result = codec.decode(json);
+            setState({ status: "ok", result });
+          } catch (e: any) {
+            setState({ status: "parsing-error", json });
+          }
+        },
     [host, path],
   );
 
   return state;
 }
 
-export function useComponentState(
-  { currency, onBack, onComplete, onPaymentRequired }: Props,
-): State {
-  const api = useBackendContext()
+export function useComponentState({
+  currency,
+  onBack,
+  onComplete,
+  onPaymentRequired,
+}: Props): State {
+  const api = useBackendContext();
   const [url, setHost] = useState<string | undefined>();
   const [name, setName] = useState<string | undefined>();
   const [tos, setTos] = useState(false);
@@ -223,8 +226,8 @@ export function useComponentState(
         !urlState || urlState.status !== "ok" || !name
           ? undefined
           : async () => {
-            setShowConfirm(true);
-          },
+              setShowConfirm(true);
+            },
     },
     urlOk: urlState?.status === "ok",
     url: {
diff --git a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/test.ts b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/test.ts
index 929e051cb..9abb672fa 100644
--- a/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/test.ts
+++ b/packages/taler-wallet-webextension/src/wallet/AddBackupProvider/test.ts
@@ -21,9 +21,7 @@
 
 import { expect } from "chai";
 import { tests } from "../../../../web-util/src/index.browser.js";
-import {
-  createWalletApiMock, nullFunction
-} from "../../test-utils.js";
+import { createWalletApiMock, nullFunction } from "../../test-utils.js";
 import { Props } from "./index.js";
 import { useComponentState } from "./state.js";
 
@@ -34,21 +32,24 @@ const props: Props = {
   onPaymentRequired: nullFunction,
 };
 describe("AddBackupProvider states", () => {
-
   it("should start in 'select-provider' state", async () => {
     const { handler, TestingContext } = createWalletApiMock();
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
-      (state) => {
-        expect(state.status).equal("select-provider");
-        if (state.status !== "select-provider") return;
-        expect(state.name.value).eq("");
-        expect(state.url.value).eq("");
-      },
-    ], TestingContext)
-
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
+        (state) => {
+          expect(state.status).equal("select-provider");
+          if (state.status !== "select-provider") return;
+          expect(state.name.value).eq("");
+          expect(state.url.value).eq("");
+        },
+      ],
+      TestingContext,
+    );
+
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
-
   });
 });
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts
index ad4c759bf..6ffbccc27 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/index.ts
@@ -20,7 +20,7 @@ import { HookError } from "../../hooks/useAsyncAsHook.js";
 import {
   AmountFieldHandler,
   ButtonHandler,
-  SelectFieldHandler
+  SelectFieldHandler,
 } from "../../mui/handlers.js";
 import { compose, StateViewMap } from "../../utils/index.js";
 import { ManageAccountPage } from "../ManageAccount/index.js";
@@ -30,7 +30,7 @@ import {
   LoadingErrorView,
   NoAccountToDepositView,
   NoEnoughBalanceView,
-  ReadyView
+  ReadyView,
 } from "./views.js";
 
 export interface Props {
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts
index 5ad0841dc..02e85a1c7 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/state.ts
@@ -21,7 +21,7 @@ import {
   KnownBankAccountsInfo,
   parsePaytoUri,
   PaytoUri,
-  stringifyPaytoUri
+  stringifyPaytoUri,
 } from "@gnu-taler/taler-util";
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { useState } from "preact/hooks";
@@ -29,10 +29,13 @@ import { useBackendContext } from "../../context/backend.js";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { Props, State } from "./index.js";
 
-export function useComponentState(
-  { amount: amountStr, currency: currencyStr, onCancel, onSuccess }: Props,
-): State {
-  const api = useBackendContext()
+export function useComponentState({
+  amount: amountStr,
+  currency: currencyStr,
+  onCancel,
+  onSuccess,
+}: Props): State {
+  const api = useBackendContext();
   const parsed = amountStr === undefined ? undefined : Amounts.parse(amountStr);
   const currency = parsed !== undefined ? parsed.currency : currencyStr;
 
@@ -55,8 +58,8 @@ export function useComponentState(
     parsed !== undefined
       ? parsed
       : currency !== undefined
-        ? Amounts.zeroOfCurrency(currency)
-        : undefined;
+      ? Amounts.zeroOfCurrency(currency)
+      : undefined;
   // const [accountIdx, setAccountIdx] = useState<number>(0);
   const [amount, setAmount] = useState<AmountJson>(initialValue ?? ({} as any));
   const [selectedAccount, setSelectedAccount] = useState<PaytoUri>();
@@ -162,7 +165,11 @@ export function useComponentState(
   async function updateAmount(newAmount: AmountJson): Promise<void> {
     // const parsed = Amounts.parse(`${currency}:${numStr}`);
     try {
-      const result = await getFeeForAmount(currentAccount, newAmount, api.wallet);
+      const result = await getFeeForAmount(
+        currentAccount,
+        newAmount,
+        api.wallet,
+      );
       setAmount(newAmount);
       setFee(result);
     } catch (e) {
@@ -185,8 +192,8 @@ export function useComponentState(
   const amountError = !isDirty
     ? undefined
     : Amounts.cmp(balance, amount) === -1
-      ? `Too much, your current balance is ${Amounts.stringifyValue(balance)}`
-      : undefined;
+    ? `Too much, your current balance is ${Amounts.stringifyValue(balance)}`
+    : undefined;
 
   const unableToDeposit =
     Amounts.isZero(totalToDeposit) || //deposit may be zero because of fee
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts
index 90ac020b7..b222709a7 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts
@@ -23,14 +23,12 @@ import {
   Amounts,
   DepositGroupFees,
   parsePaytoUri,
-  stringifyPaytoUri
+  stringifyPaytoUri,
 } from "@gnu-taler/taler-util";
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { expect } from "chai";
 import { tests } from "../../../../web-util/src/index.browser.js";
-import {
-  createWalletApiMock, nullFunction
-} from "../../test-utils.js";
+import { createWalletApiMock, nullFunction } from "../../test-utils.js";
 
 import { useComponentState } from "./state.js";
 
@@ -71,16 +69,21 @@ describe("DepositPage states", () => {
       },
     );
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
-      ({ status }) => {
-        expect(status).equal("loading");
-      },
-      ({ status }) => {
-        expect(status).equal("no-enough-balance");
-      },
-    ], TestingContext)
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
+        ({ status }) => {
+          expect(status).equal("loading");
+        },
+        ({ status }) => {
+          expect(status).equal("no-enough-balance");
+        },
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
   });
 
@@ -107,16 +110,21 @@ describe("DepositPage states", () => {
       },
     );
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
-      ({ status }) => {
-        expect(status).equal("loading");
-      },
-      ({ status }) => {
-        expect(status).equal("no-accounts");
-      },
-    ], TestingContext)
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
+        ({ status }) => {
+          expect(status).equal("loading");
+        },
+        ({ status }) => {
+          expect(status).equal("no-accounts");
+        },
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
   });
 
@@ -161,24 +169,29 @@ describe("DepositPage states", () => {
       withoutFee(),
     );
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
-      ({ status }) => {
-        expect(status).equal("loading");
-      },
-      ({ status }) => {
-        expect(status).equal("loading");
-      },
-      (state) => {
-        if (state.status !== "ready") expect.fail();
-        expect(state.cancelHandler.onClick).not.undefined;
-        expect(state.currency).eq(currency);
-        expect(state.account.value).eq(stringifyPaytoUri(ibanPayto.uri));
-        expect(state.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0"));
-        expect(state.depositHandler.onClick).undefined;
-      },
-    ], TestingContext)
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
+        ({ status }) => {
+          expect(status).equal("loading");
+        },
+        ({ status }) => {
+          expect(status).equal("loading");
+        },
+        (state) => {
+          if (state.status !== "ready") expect.fail();
+          expect(state.cancelHandler.onClick).not.undefined;
+          expect(state.currency).eq(currency);
+          expect(state.account.value).eq(stringifyPaytoUri(ibanPayto.uri));
+          expect(state.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0"));
+          expect(state.depositHandler.onClick).undefined;
+        },
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
   });
 
@@ -218,37 +231,42 @@ describe("DepositPage states", () => {
 
     const accountSelected = stringifyPaytoUri(ibanPayto.uri);
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
-      ({ status }) => {
-        expect(status).equal("loading");
-      },
-      ({ status }) => {
-        expect(status).equal("loading");
-      },
-      (state) => {
-        if (state.status !== "ready") expect.fail();
-        expect(state.cancelHandler.onClick).not.undefined;
-        expect(state.currency).eq(currency);
-        expect(state.account.value).eq(stringifyPaytoUri(talerBankPayto.uri));
-        expect(state.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0"));
-        expect(state.depositHandler.onClick).undefined;
-        expect(state.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:0`));
-        expect(state.account.onChange).not.undefined;
-
-        state.account.onChange!(accountSelected);
-      },
-      (state) => {
-        if (state.status !== "ready") expect.fail();
-        expect(state.cancelHandler.onClick).not.undefined;
-        expect(state.currency).eq(currency);
-        expect(state.account.value).eq(accountSelected);
-        expect(state.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0"));
-        expect(state.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:0`));
-        expect(state.depositHandler.onClick).undefined;
-      },
-    ], TestingContext)
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
+        ({ status }) => {
+          expect(status).equal("loading");
+        },
+        ({ status }) => {
+          expect(status).equal("loading");
+        },
+        (state) => {
+          if (state.status !== "ready") expect.fail();
+          expect(state.cancelHandler.onClick).not.undefined;
+          expect(state.currency).eq(currency);
+          expect(state.account.value).eq(stringifyPaytoUri(talerBankPayto.uri));
+          expect(state.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0"));
+          expect(state.depositHandler.onClick).undefined;
+          expect(state.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:0`));
+          expect(state.account.onChange).not.undefined;
+
+          state.account.onChange!(accountSelected);
+        },
+        (state) => {
+          if (state.status !== "ready") expect.fail();
+          expect(state.cancelHandler.onClick).not.undefined;
+          expect(state.currency).eq(currency);
+          expect(state.account.value).eq(accountSelected);
+          expect(state.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0"));
+          expect(state.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:0`));
+          expect(state.depositHandler.onClick).undefined;
+        },
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
   });
 
@@ -292,52 +310,58 @@ describe("DepositPage states", () => {
 
     const accountSelected = stringifyPaytoUri(ibanPayto.uri);
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
-      ({ status }) => {
-        expect(status).equal("loading");
-      },
-      ({ status }) => {
-        expect(status).equal("loading");
-      },
-      (state) => {
-        if (state.status !== "ready") expect.fail();
-        expect(state.cancelHandler.onClick).not.undefined;
-        expect(state.currency).eq(currency);
-        expect(state.account.value).eq(stringifyPaytoUri(talerBankPayto.uri));
-        expect(state.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0"));
-        expect(state.depositHandler.onClick).undefined;
-        expect(state.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:0`));
-        expect(state.account.onChange).not.undefined;
-
-        state.account.onChange!(accountSelected);
-      },
-      (state) => {
-        if (state.status !== "ready") expect.fail();
-        expect(state.cancelHandler.onClick).not.undefined;
-        expect(state.currency).eq(currency);
-        expect(state.account.value).eq(accountSelected);
-        expect(state.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0"));
-        expect(state.depositHandler.onClick).undefined;
-        expect(state.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:3`));
-
-        expect(state.amount.onInput).not.undefined;
-        if (!state.amount.onInput) return;
-        state.amount.onInput(Amounts.parseOrThrow("EUR:10"));
-      },
-      (state) => {
-        if (state.status !== "ready") expect.fail();
-        expect(state.cancelHandler.onClick).not.undefined;
-        expect(state.currency).eq(currency);
-        expect(state.account.value).eq(accountSelected);
-        expect(state.amount.value).deep.eq(Amounts.parseOrThrow("EUR:10"));
-        expect(state.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:3`));
-        expect(state.totalToDeposit).deep.eq(Amounts.parseOrThrow(`${currency}:7`));
-        expect(state.depositHandler.onClick).not.undefined;
-      },
-    ], TestingContext)
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
+        ({ status }) => {
+          expect(status).equal("loading");
+        },
+        ({ status }) => {
+          expect(status).equal("loading");
+        },
+        (state) => {
+          if (state.status !== "ready") expect.fail();
+          expect(state.cancelHandler.onClick).not.undefined;
+          expect(state.currency).eq(currency);
+          expect(state.account.value).eq(stringifyPaytoUri(talerBankPayto.uri));
+          expect(state.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0"));
+          expect(state.depositHandler.onClick).undefined;
+          expect(state.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:0`));
+          expect(state.account.onChange).not.undefined;
+
+          state.account.onChange!(accountSelected);
+        },
+        (state) => {
+          if (state.status !== "ready") expect.fail();
+          expect(state.cancelHandler.onClick).not.undefined;
+          expect(state.currency).eq(currency);
+          expect(state.account.value).eq(accountSelected);
+          expect(state.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0"));
+          expect(state.depositHandler.onClick).undefined;
+          expect(state.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:3`));
+
+          expect(state.amount.onInput).not.undefined;
+          if (!state.amount.onInput) return;
+          state.amount.onInput(Amounts.parseOrThrow("EUR:10"));
+        },
+        (state) => {
+          if (state.status !== "ready") expect.fail();
+          expect(state.cancelHandler.onClick).not.undefined;
+          expect(state.currency).eq(currency);
+          expect(state.account.value).eq(accountSelected);
+          expect(state.amount.value).deep.eq(Amounts.parseOrThrow("EUR:10"));
+          expect(state.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:3`));
+          expect(state.totalToDeposit).deep.eq(
+            Amounts.parseOrThrow(`${currency}:7`),
+          );
+          expect(state.depositHandler.onClick).not.undefined;
+        },
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
-
   });
 });
diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts
index 0621d3304..dd711f406 100644
--- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts
+++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/state.ts
@@ -22,10 +22,8 @@ import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { assertUnreachable, RecursiveState } from "../../utils/index.js";
 import { Contact, Props, State } from "./index.js";
 
-export function useComponentState(
-  props: Props,
-): RecursiveState<State> {
-  const api = useBackendContext()
+export function useComponentState(props: Props): RecursiveState<State> {
+  const api = useBackendContext();
   const parsedInitialAmount = !props.amount
     ? undefined
     : Amounts.parse(props.amount);
@@ -41,22 +39,22 @@ export function useComponentState(
   const previous: Contact[] = true
     ? []
     : [
-      {
-        name: "International Bank",
-        icon_type: 'bank',
-        description: "account ending with 3454",
-      },
-      {
-        name: "Max",
-        icon_type: 'bank',
-        description: "account ending with 3454",
-      },
-      {
-        name: "Alex",
-        icon_type: 'bank',
-        description: "account ending with 3454",
-      },
-    ];
+        {
+          name: "International Bank",
+          icon_type: "bank",
+          description: "account ending with 3454",
+        },
+        {
+          name: "Max",
+          icon_type: "bank",
+          description: "account ending with 3454",
+        },
+        {
+          name: "Alex",
+          icon_type: "bank",
+          description: "account ending with 3454",
+        },
+      ];
 
   if (!amount) {
     return () => {
@@ -114,15 +112,15 @@ export function useComponentState(
           onClick: invalid
             ? undefined
             : async () => {
-              props.goToWalletBankDeposit(currencyAndAmount);
-            },
+                props.goToWalletBankDeposit(currencyAndAmount);
+              },
         },
         goToWallet: {
           onClick: invalid
             ? undefined
             : async () => {
-              props.goToWalletWalletSend(currencyAndAmount);
-            },
+                props.goToWalletWalletSend(currencyAndAmount);
+              },
         },
         amountHandler: {
           onInput: async (s) => setAmount(s),
@@ -144,15 +142,15 @@ export function useComponentState(
           onClick: invalid
             ? undefined
             : async () => {
-              props.goToWalletManualWithdraw(currencyAndAmount);
-            },
+                props.goToWalletManualWithdraw(currencyAndAmount);
+              },
         },
         goToWallet: {
           onClick: invalid
             ? undefined
             : async () => {
-              props.goToWalletWalletInvoice(currencyAndAmount);
-            },
+                props.goToWalletWalletInvoice(currencyAndAmount);
+              },
         },
         amountHandler: {
           onInput: async (s) => setAmount(s),
diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/test.ts b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/test.ts
index afba5db35..cc511ce65 100644
--- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/test.ts
+++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/test.ts
@@ -23,7 +23,7 @@ import {
   Amounts,
   ExchangeEntryStatus,
   ExchangeListItem,
-  ExchangeTosStatus
+  ExchangeTosStatus,
 } from "@gnu-taler/taler-util";
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { expect } from "chai";
@@ -59,33 +59,39 @@ describe("Destination selection states", () => {
       goToWalletWalletInvoice: nullFunction,
     };
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
-      ({ status }) => {
-        expect(status).equal("loading");
-      },
-      (state) => {
-        if (state.status !== "select-currency") expect.fail();
-        if (state.error) expect.fail();
-        expect(state.currencies).deep.eq({
-          ARS: "ARS",
-          "": "Select a currency",
-        });
-
-        state.onCurrencySelected(exchangeArs.currency!);
-      },
-      (state) => {
-        if (state.status !== "ready") expect.fail();
-        if (state.error) expect.fail();
-        expect(state.goToBank.onClick).eq(undefined);
-        expect(state.goToWallet.onClick).eq(undefined);
-
-        expect(state.amountHandler.value).deep.eq(Amounts.parseOrThrow("ARS:0"));
-      },
-    ], TestingContext)
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
+        ({ status }) => {
+          expect(status).equal("loading");
+        },
+        (state) => {
+          if (state.status !== "select-currency") expect.fail();
+          if (state.error) expect.fail();
+          expect(state.currencies).deep.eq({
+            ARS: "ARS",
+            "": "Select a currency",
+          });
+
+          state.onCurrencySelected(exchangeArs.currency!);
+        },
+        (state) => {
+          if (state.status !== "ready") expect.fail();
+          if (state.error) expect.fail();
+          expect(state.goToBank.onClick).eq(undefined);
+          expect(state.goToWallet.onClick).eq(undefined);
+
+          expect(state.amountHandler.value).deep.eq(
+            Amounts.parseOrThrow("ARS:0"),
+          );
+        },
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
-
   });
 
   it("should be possible to start with an amount specified in request params", async () => {
@@ -98,22 +104,28 @@ describe("Destination selection states", () => {
       amount: "ARS:2",
     };
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
-      // ({ status }) => {
-      //   expect(status).equal("loading");
-      // },
-      (state) => {
-        if (state.status !== "ready") expect.fail();
-        if (state.error) expect.fail();
-        expect(state.goToBank.onClick).not.eq(undefined);
-        expect(state.goToWallet.onClick).not.eq(undefined);
-
-        expect(state.amountHandler.value).deep.eq(Amounts.parseOrThrow("ARS:2"));
-      },
-    ], TestingContext)
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
+        // ({ status }) => {
+        //   expect(status).equal("loading");
+        // },
+        (state) => {
+          if (state.status !== "ready") expect.fail();
+          if (state.error) expect.fail();
+          expect(state.goToBank.onClick).not.eq(undefined);
+          expect(state.goToWallet.onClick).not.eq(undefined);
+
+          expect(state.amountHandler.value).deep.eq(
+            Amounts.parseOrThrow("ARS:2"),
+          );
+        },
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
-
   });
 });
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts
index 661fa5286..1bb4fb314 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts
@@ -18,7 +18,7 @@ import {
   DenomOperationMap,
   ExchangeFullDetails,
   ExchangeListItem,
-  FeeDescriptionPair
+  FeeDescriptionPair,
 } from "@gnu-taler/taler-util";
 import { Loading } from "../../components/Loading.js";
 import { HookError } from "../../hooks/useAsyncAsHook.js";
@@ -32,7 +32,7 @@ import {
   NoExchangesView,
   PrivacyContentView,
   ReadyView,
-  TosContentView
+  TosContentView,
 } from "./views.js";
 
 export interface Props {
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts
index 585050413..378556b94 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts
@@ -17,17 +17,20 @@
 import { DenomOperationMap, FeeDescription } from "@gnu-taler/taler-util";
 import {
   createPairTimeline,
-  WalletApiOperation
+  WalletApiOperation,
 } from "@gnu-taler/taler-wallet-core";
 import { useState } from "preact/hooks";
 import { useBackendContext } from "../../context/backend.js";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { Props, State } from "./index.js";
 
-export function useComponentState(
-  { onCancel, onSelection, list: exchanges, currentExchange }: Props,
-): State {
-  const api = useBackendContext()
+export function useComponentState({
+  onCancel,
+  onSelection,
+  list: exchanges,
+  currentExchange,
+}: Props): State {
+  const api = useBackendContext();
   const initialValue = exchanges.findIndex(
     (e) => e.exchangeBaseUrl === currentExchange,
   );
@@ -52,14 +55,14 @@ export function useComponentState(
     const selected = !selectedExchange
       ? undefined
       : await api.wallet.call(WalletApiOperation.GetExchangeDetailedInfo, {
-        exchangeBaseUrl: selectedExchange.exchangeBaseUrl,
-      });
+          exchangeBaseUrl: selectedExchange.exchangeBaseUrl,
+        });
 
     const original = !initialExchange
       ? undefined
       : await api.wallet.call(WalletApiOperation.GetExchangeDetailedInfo, {
-        exchangeBaseUrl: initialExchange.exchangeBaseUrl,
-      });
+          exchangeBaseUrl: initialExchange.exchangeBaseUrl,
+        });
 
     return {
       exchanges,
diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/index.ts b/packages/taler-wallet-webextension/src/wallet/ManageAccount/index.ts
index 0ee6472d6..8541821b7 100644
--- a/packages/taler-wallet-webextension/src/wallet/ManageAccount/index.ts
+++ b/packages/taler-wallet-webextension/src/wallet/ManageAccount/index.ts
@@ -20,7 +20,7 @@ import { HookError } from "../../hooks/useAsyncAsHook.js";
 import {
   ButtonHandler,
   SelectFieldHandler,
-  TextFieldHandler
+  TextFieldHandler,
 } from "../../mui/handlers.js";
 import { compose, StateViewMap } from "../../utils/index.js";
 import { useComponentState } from "./state.js";
diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts b/packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts
index d60ef962b..9690a5c79 100644
--- a/packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts
+++ b/packages/taler-wallet-webextension/src/wallet/ManageAccount/state.ts
@@ -17,7 +17,7 @@
 import {
   KnownBankAccountsInfo,
   parsePaytoUri,
-  stringifyPaytoUri
+  stringifyPaytoUri,
 } from "@gnu-taler/taler-util";
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { useState } from "preact/hooks";
@@ -25,10 +25,12 @@ import { useBackendContext } from "../../context/backend.js";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { AccountByType, Props, State } from "./index.js";
 
-export function useComponentState(
-  { currency, onAccountAdded, onCancel }: Props,
-): State {
-  const api = useBackendContext()
+export function useComponentState({
+  currency,
+  onAccountAdded,
+  onCancel,
+}: Props): State {
+  const api = useBackendContext();
   const hook = useAsyncAsHook(() =>
     api.wallet.call(WalletApiOperation.ListKnownBankAccounts, { currency }),
   );
diff --git a/packages/taler-wallet-webextension/src/wallet/Notifications/index.ts b/packages/taler-wallet-webextension/src/wallet/Notifications/index.ts
index 3791b8967..4697ca549 100644
--- a/packages/taler-wallet-webextension/src/wallet/Notifications/index.ts
+++ b/packages/taler-wallet-webextension/src/wallet/Notifications/index.ts
@@ -21,7 +21,7 @@ import { compose, StateViewMap } from "../../utils/index.js";
 import { useComponentState } from "./state.js";
 import { LoadingUriView, ReadyView } from "./views.js";
 
-export type Props = object
+export type Props = object;
 
 export type State = State.Loading | State.LoadingUriError | State.Ready;
 
diff --git a/packages/taler-wallet-webextension/src/wallet/Notifications/state.ts b/packages/taler-wallet-webextension/src/wallet/Notifications/state.ts
index 1042dea9f..648e490ce 100644
--- a/packages/taler-wallet-webextension/src/wallet/Notifications/state.ts
+++ b/packages/taler-wallet-webextension/src/wallet/Notifications/state.ts
@@ -20,7 +20,7 @@ import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { Props, State } from "./index.js";
 
 export function useComponentState(p: Props): State {
-  const api = useBackendContext()
+  const api = useBackendContext();
   const hook = useAsyncAsHook(async () => {
     return await api.wallet.call(
       WalletApiOperation.GetUserAttentionRequests,