pretty

packages/taler-wallet-webextension/src/components/TermsOfService/index.ts

@@ -25,7 +25,7 @@ import {
   LoadingUriView,
   ShowButtonsAcceptedTosView,
   ShowButtonsNonAcceptedTosView,
-  ShowTosContentView
+  ShowTosContentView,
 } from "./views.js";
 
 export interface Props {

packages/taler-wallet-webextension/src/components/TermsOfService/state.ts

@@ -21,10 +21,8 @@ import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { Props, State } from "./index.js";
 import { buildTermsOfServiceState } from "./utils.js";
 
-export function useComponentState(
+export function useComponentState({ exchangeUrl, onChange }: Props): State {
-  { exchangeUrl, onChange }: Props,
+  const api = useBackendContext();
-): State {
-  const api = useBackendContext()
   const readOnly = !onChange;
   const [showContent, setShowContent] = useState<boolean>(readOnly);
   const [errorAccepting, setErrorAccepting] = useState<Error | undefined>(

packages/taler-wallet-webextension/src/context/backend.ts

@@ -23,7 +23,7 @@ import { ComponentChildren, createContext, h, VNode } from "preact";
 import { useContext } from "preact/hooks";
 import { wxApi, WxApiType } from "../wxApi.js";
 
-type Type = WxApiType
+type Type = WxApiType;
 
 const initial = wxApi;
 
@@ -31,7 +31,7 @@ const Context = createContext<Type>(initial);
 
 type Props = Partial<WxApiType> & {
   children: ComponentChildren;
-}
+};
 
 export const BackendProvider = ({
   wallet,
@@ -39,12 +39,11 @@ export const BackendProvider = ({
   listener,
   children,
 }: Props): VNode => {
-
   return h(Context.Provider, {
     value: {
       wallet: wallet ?? initial.wallet,
       background: background ?? initial.background,
-      listener: listener ?? initial.listener
+      listener: listener ?? initial.listener,
     },
     children,
   });

packages/taler-wallet-webextension/src/cta/Deposit/state.ts

@@ -20,10 +20,13 @@ import { useBackendContext } from "../../context/backend.js";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { Props, State } from "./index.js";
 
-export function useComponentState(
+export function useComponentState({
-  { talerDepositUri, amountStr, cancel, onSuccess }: Props,
+  talerDepositUri,
-): State {
+  amountStr,
-  const api = useBackendContext()
+  cancel,
+  onSuccess,
+}: Props): State {
+  const api = useBackendContext();
   const info = useAsyncAsHook(async () => {
     if (!talerDepositUri) throw Error("ERROR_NO-URI-FOR-DEPOSIT");
     if (!amountStr) throw Error("ERROR_NO-AMOUNT-FOR-DEPOSIT");

packages/taler-wallet-webextension/src/cta/Deposit/test.ts

@@ -42,7 +42,10 @@ describe("Deposit CTA states", () => {
       },
     };
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
         ({ status }) => {
           expect(status).equals("loading");
         },
@@ -54,9 +57,11 @@ describe("Deposit CTA states", () => {
           if (error.operational) expect.fail();
           expect(error.message).eq("ERROR_NO-URI-FOR-DEPOSIT");
         },
-    ], TestingContext)
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
   });
 
@@ -83,7 +88,10 @@ describe("Deposit CTA states", () => {
       },
     };
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
         ({ status }) => {
           expect(status).equals("loading");
         },
@@ -95,9 +103,11 @@ describe("Deposit CTA states", () => {
           expect(state.fee).deep.eq(Amounts.parseOrThrow("EUR:0.2"));
           expect(state.effective).deep.eq(Amounts.parseOrThrow("EUR:1"));
         },
-    ], TestingContext)
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
   });
 });

packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts

@@ -29,11 +29,13 @@ import { useSelectedExchange } from "../../hooks/useSelectedExchange.js";
 import { RecursiveState } from "../../utils/index.js";
 import { Props, State } from "./index.js";
 
-export function useComponentState(
+export function useComponentState({
-  { amount: amountStr, onClose, onSuccess }: Props,
+  amount: amountStr,
-): RecursiveState<State> {
+  onClose,
+  onSuccess,
+}: Props): RecursiveState<State> {
   const amount = Amounts.parseOrThrow(amountStr);
-  const api = useBackendContext()
+  const api = useBackendContext();
 
   const hook = useAsyncAsHook(() =>
     api.wallet.call(WalletApiOperation.ListExchanges, {}),

packages/taler-wallet-webextension/src/cta/InvoicePay/index.ts

@@ -18,7 +18,7 @@ import {
   AbsoluteTime,
   AmountJson,
   PreparePayResult,
-  TalerErrorDetail
+  TalerErrorDetail,
 } from "@gnu-taler/taler-util";
 import { Loading } from "../../components/Loading.js";
 import { HookError } from "../../hooks/useAsyncAsHook.js";

packages/taler-wallet-webextension/src/cta/InvoicePay/state.ts

@@ -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(
+export function useComponentState({
-  { talerPayPullUri, onClose, goToWalletManualWithdraw, onSuccess }: Props,
+  talerPayPullUri,
-): State {
+  onClose,
-  const api = useBackendContext()
+  goToWalletManualWithdraw,
+  onSuccess,
+}: Props): State {
+  const api = useBackendContext();
   const hook = useAsyncAsHook(async () => {
     const p2p = await api.wallet.call(WalletApiOperation.CheckPeerPullPayment, {
       talerUri: talerPayPullUri,

packages/taler-wallet-webextension/src/cta/Payment/index.ts

@@ -19,7 +19,7 @@ import {
   PreparePayResult,
   PreparePayResultAlreadyConfirmed,
   PreparePayResultInsufficientBalance,
-  PreparePayResultPaymentPossible
+  PreparePayResultPaymentPossible,
 } from "@gnu-taler/taler-util";
 import { Loading } from "../../components/Loading.js";
 import { HookError } from "../../hooks/useAsyncAsHook.js";

packages/taler-wallet-webextension/src/cta/Payment/state.ts

@@ -28,11 +28,14 @@ import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { ButtonHandler } from "../../mui/handlers.js";
 import { Props, State } from "./index.js";
 
-export function useComponentState(
+export function useComponentState({
-  { talerPayUri, cancel, goToWalletManualWithdraw, onSuccess }: Props,
+  talerPayUri,
-): State {
+  cancel,
+  goToWalletManualWithdraw,
+  onSuccess,
+}: Props): State {
   const [payErrMsg, setPayErrMsg] = useState<TalerError | undefined>(undefined);
-  const api = useBackendContext()
+  const api = useBackendContext();
 
   const hook = useAsyncAsHook(async () => {
     if (!talerPayUri) throw Error("ERROR_NO-URI-FOR-PAYMENT");

packages/taler-wallet-webextension/src/cta/Payment/test.ts

@@ -45,7 +45,10 @@ describe("Payment CTA states", () => {
       onSuccess: nullFunction,
     };
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
         ({ status, error }) => {
           expect(status).equals("loading");
           expect(error).undefined;
@@ -56,11 +59,12 @@ describe("Payment CTA states", () => {
           expect(error.hasError).true;
           expect(error.operational).false;
         },
-    ], TestingContext)
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
-
   });
 
   it("should response with no balance", async () => {
@@ -86,7 +90,10 @@ describe("Payment CTA states", () => {
       { balances: [] },
     );
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
         ({ status, error }) => {
           expect(status).equals("loading");
           expect(error).undefined;
@@ -99,9 +106,11 @@ describe("Payment CTA states", () => {
           expect(state.balance).undefined;
           expect(state.amount).deep.equal(Amounts.parseOrThrow("USD:10"));
         },
-    ], TestingContext)
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
   });
 
@@ -138,7 +147,10 @@ describe("Payment CTA states", () => {
       },
     );
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
         ({ status, error }) => {
           expect(status).equals("loading");
           expect(error).undefined;
@@ -148,9 +160,11 @@ describe("Payment CTA states", () => {
           expect(state.balance).deep.equal(Amounts.parseOrThrow("USD:5"));
           expect(state.amount).deep.equal(Amounts.parseOrThrow("USD:10"));
         },
-    ], TestingContext)
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
   });
 
@@ -187,7 +201,10 @@ describe("Payment CTA states", () => {
         ],
       },
     );
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
         ({ status, error }) => {
           expect(status).equals("loading");
           expect(error).undefined;
@@ -201,11 +218,12 @@ describe("Payment CTA states", () => {
           expect(state.amount).deep.equal(Amounts.parseOrThrow("USD:10"));
           expect(state.payHandler.onClick).not.undefined;
         },
-    ], TestingContext)
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
-
   });
 
   it("should be able to pay (with fee)", async () => {
@@ -241,7 +259,10 @@ describe("Payment CTA states", () => {
         ],
       },
     );
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
         ({ status, error }) => {
           expect(status).equals("loading");
           expect(error).undefined;
@@ -252,9 +273,11 @@ describe("Payment CTA states", () => {
           expect(state.amount).deep.equal(Amounts.parseOrThrow("USD:9"));
           expect(state.payHandler.onClick).not.undefined;
         },
-    ], TestingContext)
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
   });
 
@@ -297,7 +320,10 @@ describe("Payment CTA states", () => {
       contractTerms: {},
     } as ConfirmPayResult);
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
         ({ status, error }) => {
           expect(status).equals("loading");
           expect(error).undefined;
@@ -312,11 +338,12 @@ describe("Payment CTA states", () => {
           if (state.payHandler.onClick === undefined) expect.fail();
           state.payHandler.onClick();
         },
-    ], TestingContext)
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
-
   });
 
   it("should not stay in ready state after pay with error", async () => {
@@ -357,7 +384,10 @@ describe("Payment CTA states", () => {
       lastError: { code: 1 },
     } as ConfirmPayResult);
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
         ({ status, error }) => {
           expect(status).equals("loading");
           expect(error).undefined;
@@ -386,11 +416,12 @@ describe("Payment CTA states", () => {
             lastError: { code: 1 },
           });
         },
-    ], TestingContext)
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
-
   });
 
   it("should update balance if a coins is withdraw", async () => {
@@ -455,13 +486,16 @@ describe("Payment CTA states", () => {
       },
     );
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
         ({ status, error }) => {
           expect(status).equals("loading");
           expect(error).undefined;
         },
         (state) => {
-        if (state.status !== "ready") expect.fail()
+          if (state.status !== "ready") expect.fail();
           expect(state.balance).deep.equal(Amounts.parseOrThrow("USD:10"));
           expect(state.amount).deep.equal(Amounts.parseOrThrow("USD:9"));
           // expect(r.totalFees).deep.equal(Amounts.parseOrThrow("USD:1"));
@@ -470,15 +504,17 @@ describe("Payment CTA states", () => {
           handler.notifyEventFromWallet(NotificationType.CoinWithdrawn);
         },
         (state) => {
-        if (state.status !== "ready") expect.fail()
+          if (state.status !== "ready") expect.fail();
           expect(state.balance).deep.equal(Amounts.parseOrThrow("USD:15"));
           expect(state.amount).deep.equal(Amounts.parseOrThrow("USD:9"));
           // expect(r.totalFees).deep.equal(Amounts.parseOrThrow("USD:1"));
           expect(state.payHandler.onClick).not.undefined;
         },
-    ], TestingContext)
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
   });
 });

packages/taler-wallet-webextension/src/cta/Recovery/state.ts

@@ -19,10 +19,12 @@ import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { useBackendContext } from "../../context/backend.js";
 import { Props, State } from "./index.js";
 
-export function useComponentState(
+export function useComponentState({
-  { talerRecoveryUri, onCancel, onSuccess }: Props,
+  talerRecoveryUri,
-): State {
+  onCancel,
-  const api = useBackendContext()
+  onSuccess,
+}: Props): State {
+  const api = useBackendContext();
   if (!talerRecoveryUri) {
     return {
       status: "loading-uri",

packages/taler-wallet-webextension/src/cta/Refund/index.ts

@@ -24,7 +24,7 @@ import {
   IgnoredView,
   InProgressView,
   LoadingUriView,
-  ReadyView
+  ReadyView,
 } from "./views.js";
 
 export interface Props {

packages/taler-wallet-webextension/src/cta/Refund/state.ts

@@ -21,10 +21,12 @@ import { useBackendContext } from "../../context/backend.js";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { Props, State } from "./index.js";
 
-export function useComponentState(
+export function useComponentState({
-  { talerRefundUri, cancel, onSuccess }: Props,
+  talerRefundUri,
-): State {
+  cancel,
-  const api = useBackendContext()
+  onSuccess,
+}: Props): State {
+  const api = useBackendContext();
   const [ignored, setIgnored] = useState(false);
 
   const info = useAsyncAsHook(async () => {

packages/taler-wallet-webextension/src/cta/Refund/test.ts

@@ -22,12 +22,16 @@
 import {
   Amounts,
   NotificationType,
-  OrderShortInfo
+  OrderShortInfo,
 } 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, mountHook, nullFunction } from "../../test-utils.js";
+import {
+  createWalletApiMock,
+  mountHook,
+  nullFunction,
+} from "../../test-utils.js";
 import { useComponentState } from "./state.js";
 
 describe("Refund CTA states", () => {
@@ -38,9 +42,12 @@ describe("Refund CTA states", () => {
       talerRefundUri: undefined,
       cancel: nullFunction,
       onSuccess: nullFunction,
-    }
+    };
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
         ({ status, error }) => {
           expect(status).equals("loading");
           expect(error).undefined;
@@ -52,9 +59,11 @@ describe("Refund CTA states", () => {
           if (error.operational) expect.fail();
           expect(error.message).eq("ERROR_NO-URI-FOR-REFUND");
         },
-    ], TestingContext)
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
   });
 
@@ -83,7 +92,10 @@ describe("Refund CTA states", () => {
       } as OrderShortInfo,
     });
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
         ({ status, error }) => {
           expect(status).equals("loading");
           expect(error).undefined;
@@ -97,9 +109,11 @@ describe("Refund CTA states", () => {
           expect(state.orderId).eq("orderId1");
           expect(state.products).undefined;
         },
-    ], TestingContext)
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
   });
 
@@ -132,14 +146,17 @@ describe("Refund CTA states", () => {
       } as OrderShortInfo,
     });
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
         ({ status, error }) => {
           expect(status).equals("loading");
           expect(error).undefined;
         },
         (state) => {
-        if (state.status !== "ready") expect.fail()
+          if (state.status !== "ready") expect.fail();
-        if (state.error) expect.fail()
+          if (state.error) expect.fail();
           expect(state.accept.onClick).not.undefined;
           expect(state.merchantName).eq("the merchant name");
           expect(state.orderId).eq("orderId1");
@@ -149,13 +166,15 @@ describe("Refund CTA states", () => {
           state.ignore.onClick();
         },
         (state) => {
-        if (state.status !== "ignored") expect.fail()
+          if (state.status !== "ignored") expect.fail();
-        if (state.error) expect.fail()
+          if (state.error) expect.fail();
           expect(state.merchantName).eq("the merchant name");
         },
-    ], TestingContext)
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
   });
 
@@ -220,13 +239,16 @@ describe("Refund CTA states", () => {
       } as OrderShortInfo,
     });
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
         ({ status, error }) => {
           expect(status).equals("loading");
           expect(error).undefined;
         },
         (state) => {
-        if (state.status !== "in-progress") expect.fail()
+          if (state.status !== "in-progress") expect.fail();
           if (state.error) expect.fail();
           expect(state.merchantName).eq("the merchant name");
           expect(state.products).undefined;
@@ -236,7 +258,7 @@ describe("Refund CTA states", () => {
           handler.notifyEventFromWallet(NotificationType.RefreshMelted);
         },
         (state) => {
-        if (state.status !== "in-progress") expect.fail()
+          if (state.status !== "in-progress") expect.fail();
           if (state.error) expect.fail();
           expect(state.merchantName).eq("the merchant name");
           expect(state.products).undefined;
@@ -246,16 +268,17 @@ describe("Refund CTA states", () => {
           handler.notifyEventFromWallet(NotificationType.RefreshMelted);
         },
         (state) => {
-        if (state.status !== "ready") expect.fail()
+          if (state.status !== "ready") expect.fail();
           if (state.error) expect.fail();
           expect(state.merchantName).eq("the merchant name");
           expect(state.products).undefined;
           expect(state.amount).deep.eq(Amounts.parseOrThrow("EUR:2"));
-
         },
-    ], TestingContext)
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
   });
 });

packages/taler-wallet-webextension/src/cta/Tip/index.ts

@@ -24,7 +24,7 @@ import {
   AcceptedView,
   IgnoredView,
   LoadingUriView,
-  ReadyView
+  ReadyView,
 } from "./views.js";
 
 export interface Props {

packages/taler-wallet-webextension/src/cta/Tip/state.ts

@@ -20,10 +20,12 @@ import { useBackendContext } from "../../context/backend.js";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { Props, State } from "./index.js";
 
-export function useComponentState(
+export function useComponentState({
-  { talerTipUri, onCancel, onSuccess }: Props,
+  talerTipUri,
-): State {
+  onCancel,
-  const api = useBackendContext()
+  onSuccess,
+}: Props): State {
+  const api = useBackendContext();
   const tipInfo = useAsyncAsHook(async () => {
     if (!talerTipUri) throw Error("ERROR_NO-URI-FOR-TIP");
     const tip = await api.wallet.call(WalletApiOperation.PrepareTip, {

packages/taler-wallet-webextension/src/cta/Tip/test.ts

@@ -36,9 +36,12 @@ describe("Tip CTA states", () => {
       talerTipUri: undefined,
       onCancel: nullFunction,
       onSuccess: nullFunction,
-    }
+    };
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
         ({ status, error }) => {
           expect(status).equals("loading");
           expect(error).undefined;
@@ -50,9 +53,11 @@ describe("Tip CTA states", () => {
           if (error.operational) expect.fail();
           expect(error.message).eq("ERROR_NO-URI-FOR-TIP");
         },
-    ], TestingContext)
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
   });
 
@@ -75,9 +80,12 @@ describe("Tip CTA states", () => {
       talerTipUri: "taler://tip/asd",
       onCancel: nullFunction,
       onSuccess: nullFunction,
-    }
+    };
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
         ({ status, error }) => {
           expect(status).equals("loading");
           expect(error).undefined;
@@ -96,7 +104,10 @@ describe("Tip CTA states", () => {
           handler.addWalletCallResponse(WalletApiOperation.AcceptTip);
           state.accept.onClick();
 
-        handler.addWalletCallResponse(WalletApiOperation.PrepareTip, undefined, {
+          handler.addWalletCallResponse(
+            WalletApiOperation.PrepareTip,
+            undefined,
+            {
               accepted: true,
               exchangeBaseUrl: "exchange url",
               merchantBaseUrl: "merchant url",
@@ -106,19 +117,21 @@ describe("Tip CTA states", () => {
                 t_s: 1,
               },
               tipAmountRaw: "",
-        });
+            },
-
+          );
         },
         (state) => {
-        if (state.status !== "accepted") expect.fail()
+          if (state.status !== "accepted") expect.fail();
           if (state.error) expect.fail();
           expect(state.amount).deep.eq(Amounts.parseOrThrow("EUR:1"));
           expect(state.merchantBaseUrl).eq("merchant url");
           expect(state.exchangeBaseUrl).eq("exchange url");
         },
-    ], TestingContext)
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
   });
 
@@ -140,9 +153,12 @@ describe("Tip CTA states", () => {
       talerTipUri: "taler://tip/asd",
       onCancel: nullFunction,
       onSuccess: nullFunction,
-    }
+    };
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
         ({ status, error }) => {
           expect(status).equals("loading");
           expect(error).undefined;
@@ -156,9 +172,11 @@ describe("Tip CTA states", () => {
 
           //FIXME: add ignore button
         },
-    ], TestingContext)
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
   });
 
@@ -181,9 +199,12 @@ describe("Tip CTA states", () => {
       talerTipUri: "taler://tip/asd",
       onCancel: nullFunction,
       onSuccess: nullFunction,
-    }
+    };
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
         ({ status, error }) => {
           expect(status).equals("loading");
           expect(error).undefined;
@@ -195,10 +216,11 @@ describe("Tip CTA states", () => {
           expect(state.merchantBaseUrl).eq("merchant url");
           expect(state.exchangeBaseUrl).eq("exchange url");
         },
-    ], TestingContext)
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
-
   });
 });

packages/taler-wallet-webextension/src/cta/TransferCreate/state.ts

@@ -17,7 +17,7 @@
 import {
   Amounts,
   TalerErrorDetail,
-  TalerProtocolTimestamp
+  TalerProtocolTimestamp,
 } from "@gnu-taler/taler-util";
 import { TalerError, WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { isFuture, parse } from "date-fns";
@@ -26,10 +26,12 @@ import { useBackendContext } from "../../context/backend.js";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { Props, State } from "./index.js";
 
-export function useComponentState(
+export function useComponentState({
-  { amount: amountStr, onClose, onSuccess }: Props,
+  amount: amountStr,
-): State {
+  onClose,
-  const api = useBackendContext()
+  onSuccess,
+}: Props): State {
+  const api = useBackendContext();
   const amount = Amounts.parseOrThrow(amountStr);
 
   const [subject, setSubject] = useState<string | undefined>();

packages/taler-wallet-webextension/src/cta/TransferPickup/index.ts

@@ -17,7 +17,7 @@
 import {
   AbsoluteTime,
   AmountJson,
-  TalerErrorDetail
+  TalerErrorDetail,
 } from "@gnu-taler/taler-util";
 import { Loading } from "../../components/Loading.js";
 import { HookError } from "../../hooks/useAsyncAsHook.js";

packages/taler-wallet-webextension/src/cta/TransferPickup/state.ts

@@ -18,7 +18,7 @@ import {
   AbsoluteTime,
   Amounts,
   TalerErrorDetail,
-  TalerProtocolTimestamp
+  TalerProtocolTimestamp,
 } from "@gnu-taler/taler-util";
 import { TalerError, WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { useState } from "preact/hooks";
@@ -26,10 +26,12 @@ import { useBackendContext } from "../../context/backend.js";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { Props, State } from "./index.js";
 
-export function useComponentState(
+export function useComponentState({
-  { talerPayPushUri, onClose, onSuccess }: Props,
+  talerPayPushUri,
-): State {
+  onClose,
-  const api = useBackendContext()
+  onSuccess,
+}: Props): State {
+  const api = useBackendContext();
   const hook = useAsyncAsHook(async () => {
     return await api.wallet.call(WalletApiOperation.CheckPeerPushPayment, {
       talerUri: talerPayPushUri,

packages/taler-wallet-webextension/src/cta/Withdraw/index.ts

@@ -22,7 +22,7 @@ import { ButtonHandler, SelectFieldHandler } from "../../mui/handlers.js";
 import { compose, StateViewMap } from "../../utils/index.js";
 import {
   useComponentStateFromParams,
-  useComponentStateFromURI
+  useComponentStateFromURI,
 } from "./state.js";
 
 import { ExchangeSelectionPage } from "../../wallet/ExchangeSelection/index.js";

packages/taler-wallet-webextension/src/cta/Withdraw/state.ts

@@ -19,7 +19,7 @@ import {
   AmountJson,
   Amounts,
   ExchangeListItem,
-  ExchangeTosStatus
+  ExchangeTosStatus,
 } from "@gnu-taler/taler-util";
 import { TalerError, WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { useState } from "preact/hooks";
@@ -29,10 +29,12 @@ import { useSelectedExchange } from "../../hooks/useSelectedExchange.js";
 import { RecursiveState } from "../../utils/index.js";
 import { PropsFromParams, PropsFromURI, State } from "./index.js";
 
-export function useComponentStateFromParams(
+export function useComponentStateFromParams({
-  { amount, cancel, onSuccess }: PropsFromParams,
+  amount,
-): RecursiveState<State> {
+  cancel,
-  const api = useBackendContext()
+  onSuccess,
+}: PropsFromParams): RecursiveState<State> {
+  const api = useBackendContext();
   const uriInfoHook = useAsyncAsHook(async () => {
     const exchanges = await api.wallet.call(
       WalletApiOperation.ListExchanges,
@@ -87,10 +89,12 @@ export function useComponentStateFromParams(
     );
 }
 
-export function useComponentStateFromURI(
+export function useComponentStateFromURI({
-  { talerWithdrawUri, cancel, onSuccess }: PropsFromURI,
+  talerWithdrawUri,
-): RecursiveState<State> {
+  cancel,
-  const api = useBackendContext()
+  onSuccess,
+}: PropsFromURI): RecursiveState<State> {
+  const api = useBackendContext();
   /**
    * Ask the wallet about the withdraw URI
    */
@@ -175,7 +179,7 @@ function exchangeSelectionState(
   exchangeList: ExchangeListItem[],
   defaultExchange: string | undefined,
 ): RecursiveState<State> {
-  const api = useBackendContext()
+  const api = useBackendContext();
   const selectedExchange = useSelectedExchange({
     currency: chosenAmount.currency,
     defaultExchange,

packages/taler-wallet-webextension/src/cta/Withdraw/test.ts

@@ -64,7 +64,7 @@ const exchanges: ExchangeListItem[] = [
 
 const nullFunction = async (): Promise<void> => {
   null;
-}
+};
 
 describe("Withdraw CTA states", () => {
   it("should tell the user that the URI is missing", async () => {
@@ -76,7 +76,10 @@ describe("Withdraw CTA states", () => {
       onSuccess: nullFunction,
     };
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentStateFromURI, props, [
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentStateFromURI,
+      props,
+      [
         ({ status }) => {
           expect(status).equals("loading");
         },
@@ -87,9 +90,11 @@ describe("Withdraw CTA states", () => {
           if (error.operational) expect.fail();
           expect(error.message).eq("ERROR_NO-URI-FOR-WITHDRAWAL");
         },
-    ], TestingContext)
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
   });
 
@@ -110,7 +115,10 @@ describe("Withdraw CTA states", () => {
       },
     );
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentStateFromURI, props, [
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentStateFromURI,
+      props,
+      [
         ({ status }) => {
           expect(status).equals("loading");
         },
@@ -118,9 +126,11 @@ describe("Withdraw CTA states", () => {
           expect(status).equals("no-exchange");
           expect(error).undefined;
         },
-    ], TestingContext)
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
   });
 
@@ -153,7 +163,10 @@ describe("Withdraw CTA states", () => {
       },
     );
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentStateFromURI, props, [
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentStateFromURI,
+      props,
+      [
         ({ status }) => {
           expect(status).equals("loading");
         },
@@ -171,9 +184,11 @@ describe("Withdraw CTA states", () => {
 
           expect(state.doWithdrawal.onClick).not.undefined;
         },
-    ], TestingContext)
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
   });
 
@@ -221,7 +236,10 @@ describe("Withdraw CTA states", () => {
       },
     );
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentStateFromURI, props, [
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentStateFromURI,
+      props,
+      [
         ({ status }) => {
           expect(status).equals("loading");
         },
@@ -251,9 +269,11 @@ describe("Withdraw CTA states", () => {
 
           expect(state.doWithdrawal.onClick).not.undefined;
         },
-    ], TestingContext)
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
   });
 });

packages/taler-wallet-webextension/src/hooks/useAutoOpenPermissions.ts

@@ -25,9 +25,11 @@ export function useAutoOpenPermissions(): ToggleHandler {
   const [enabled, setEnabled] = useState(false);
   const [error, setError] = useState<TalerError | undefined>();
   const toggle = async (): Promise<void> => {
-    return handleAutoOpenPerm(enabled, setEnabled, api.background).catch((e) => {
+    return handleAutoOpenPerm(enabled, setEnabled, api.background).catch(
+      (e) => {
         setError(TalerError.fromException(e));
-    });
+      },
+    );
   };
 
   useEffect(() => {

packages/taler-wallet-webextension/src/hooks/useBackupDeviceName.ts

@@ -28,7 +28,7 @@ export function useBackupDeviceName(): BackupDeviceName {
     name: "",
     update: () => Promise.resolve(),
   });
-  const api = useBackendContext()
+  const api = useBackendContext();
 
   useEffect(() => {
     async function run(): Promise<void> {

packages/taler-wallet-webextension/src/hooks/useClipboardPermissions.ts

@@ -23,12 +23,14 @@ import { platform } from "../platform/api.js";
 export function useClipboardPermissions(): ToggleHandler {
   const [enabled, setEnabled] = useState(false);
   const [error, setError] = useState<TalerError | undefined>();
-  const api = useBackendContext()
+  const api = useBackendContext();
 
   const toggle = async (): Promise<void> => {
-    return handleClipboardPerm(enabled, setEnabled, api.background).catch((e) => {
+    return handleClipboardPerm(enabled, setEnabled, api.background).catch(
+      (e) => {
         setError(TalerError.fromException(e));
-    });
+      },
+    );
   };
 
   useEffect(() => {

packages/taler-wallet-webextension/src/platform/chrome.ts

@@ -444,8 +444,8 @@ function registerTalerHeaderListener(
     info: chrome.tabs.TabChangeInfo,
   ): Promise<void> {
     if (tabId < 0) return;
-    const tabLocationHasBeenUpdated = info.status === "complete"
+    const tabLocationHasBeenUpdated = info.status === "complete";
-    const tabTitleHasBeenUpdated = info.title !== undefined
+    const tabTitleHasBeenUpdated = info.title !== undefined;
     if (tabLocationHasBeenUpdated || tabTitleHasBeenUpdated) {
       const uri = await findTalerUriInTab(tabId);
       if (!uri) return;

packages/taler-wallet-webextension/src/stories.test.ts

@@ -34,18 +34,21 @@ setupI18n("en", { en: {} });
 setupPlatform(chromeAPI);
 
 describe("All the examples:", () => {
-  const cms = parseGroupImport({ popup, wallet, cta, mui, components })
+  const cms = parseGroupImport({ popup, wallet, cta, mui, components });
-  cms.forEach(group => {
+  cms.forEach((group) => {
     describe(`Example for group "${group.title}:"`, () => {
-      group.list.forEach(component => {
+      group.list.forEach((component) => {
         describe(`Component ${component.name}:`, () => {
-          component.examples.forEach(example => {
+          component.examples.forEach((example) => {
             it(`should render example: ${example.name}`, () => {
-              renderNodeOrBrowser(example.render.component, example.render.props)
+              renderNodeOrBrowser(
-            })
+                example.render.component,
-          })
+                example.render.props,
-        })
+              );
-      })
+            });
-    })
+          });
-  })
+        });
+      });
+    });
+  });
 });

packages/taler-wallet-webextension/src/test-utils.ts

@@ -54,7 +54,7 @@ export function createExample<Props>(
 
   return {
     component: Render,
-    props: evaluatedProps
+    props: evaluatedProps,
   };
 }
 
@@ -74,7 +74,7 @@ export function createExampleWithCustomContext<Props, ContextProps>(
 
   return {
     component: WithContext,
-    props: evaluatedProps
+    props: evaluatedProps,
   };
 }
 
@@ -253,7 +253,7 @@ type Subscriptions = {
 
 export function createWalletApiMock(): {
   handler: MockHandler;
-  TestingContext: FunctionalComponent<{ children: ComponentChildren }>
+  TestingContext: FunctionalComponent<{ children: ComponentChildren }>;
 } {
   const calls = new Array<CallRecord>();
   const subscriptions: Subscriptions = {};
@@ -358,13 +358,21 @@ export function createWalletApiMock(): {
     },
   };
 
-  function TestingContext({ children }: { children: ComponentChildren }): VNode {
+  function TestingContext({
-    return create(BackendProvider, {
+    children,
+  }: {
+    children: ComponentChildren;
+  }): VNode {
+    return create(
+      BackendProvider,
+      {
         wallet: mock.wallet,
         background: mock.background,
         listener: mock.listener,
         children,
-    }, children)
+      },
+      children,
+    );
   }
 
   return { handler, TestingContext };

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 {
+import { TalerErrorDetail } from "@gnu-taler/taler-util";
-  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,
+  ConfirmProviderView,
-  SelectProviderView
+  LoadingUriView,
+  SelectProviderView,
 } from "./views.js";
 
 export interface Props {

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";
@@ -143,10 +143,13 @@ function useUrlState<T>(
   return state;
 }
 
-export function useComponentState(
+export function useComponentState({
-  { currency, onBack, onComplete, onPaymentRequired }: Props,
+  currency,
-): State {
+  onBack,
-  const api = useBackendContext()
+  onComplete,
+  onPaymentRequired,
+}: Props): State {
+  const api = useBackendContext();
   const [url, setHost] = useState<string | undefined>();
   const [name, setName] = useState<string | undefined>();
   const [tos, setTos] = useState(false);

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 {
+import { createWalletApiMock, nullFunction } from "../../test-utils.js";
-  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, [
+    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)
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
-
   });
 });

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 {

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(
+export function useComponentState({
-  { amount: amountStr, currency: currencyStr, onCancel, onSuccess }: Props,
+  amount: amountStr,
-): State {
+  currency: currencyStr,
-  const api = useBackendContext()
+  onCancel,
+  onSuccess,
+}: Props): State {
+  const api = useBackendContext();
   const parsed = amountStr === undefined ? undefined : Amounts.parse(amountStr);
   const currency = parsed !== undefined ? parsed.currency : currencyStr;
 
@@ -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) {

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 {
+import { createWalletApiMock, nullFunction } from "../../test-utils.js";
-  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, [
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
         ({ status }) => {
           expect(status).equal("loading");
         },
         ({ status }) => {
           expect(status).equal("no-enough-balance");
         },
-    ], TestingContext)
+      ],
+      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, [
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
         ({ status }) => {
           expect(status).equal("loading");
         },
         ({ status }) => {
           expect(status).equal("no-accounts");
         },
-    ], TestingContext)
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
   });
 
@@ -161,7 +169,10 @@ describe("DepositPage states", () => {
       withoutFee(),
     );
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
         ({ status }) => {
           expect(status).equal("loading");
         },
@@ -176,9 +187,11 @@ describe("DepositPage states", () => {
           expect(state.amount.value).deep.eq(Amounts.parseOrThrow("EUR:0"));
           expect(state.depositHandler.onClick).undefined;
         },
-    ], TestingContext)
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
   });
 
@@ -218,7 +231,10 @@ describe("DepositPage states", () => {
 
     const accountSelected = stringifyPaytoUri(ibanPayto.uri);
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
         ({ status }) => {
           expect(status).equal("loading");
         },
@@ -246,9 +262,11 @@ describe("DepositPage states", () => {
           expect(state.totalFee).deep.eq(Amounts.parseOrThrow(`${currency}:0`));
           expect(state.depositHandler.onClick).undefined;
         },
-    ], TestingContext)
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
   });
 
@@ -292,7 +310,10 @@ describe("DepositPage states", () => {
 
     const accountSelected = stringifyPaytoUri(ibanPayto.uri);
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
         ({ status }) => {
           expect(status).equal("loading");
         },
@@ -331,13 +352,16 @@ describe("DepositPage states", () => {
           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.totalToDeposit).deep.eq(
+            Amounts.parseOrThrow(`${currency}:7`),
+          );
           expect(state.depositHandler.onClick).not.undefined;
         },
-    ], TestingContext)
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
-
   });
 });

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(
+export function useComponentState(props: Props): RecursiveState<State> {
-  props: Props,
+  const api = useBackendContext();
-): RecursiveState<State> {
-  const api = useBackendContext()
   const parsedInitialAmount = !props.amount
     ? undefined
     : Amounts.parse(props.amount);
@@ -43,17 +41,17 @@ export function useComponentState(
     : [
         {
           name: "International Bank",
-        icon_type: 'bank',
+          icon_type: "bank",
           description: "account ending with 3454",
         },
         {
           name: "Max",
-        icon_type: 'bank',
+          icon_type: "bank",
           description: "account ending with 3454",
         },
         {
           name: "Alex",
-        icon_type: 'bank',
+          icon_type: "bank",
           description: "account ending with 3454",
         },
       ];

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,7 +59,10 @@ describe("Destination selection states", () => {
       goToWalletWalletInvoice: nullFunction,
     };
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
         ({ status }) => {
           expect(status).equal("loading");
         },
@@ -79,13 +82,16 @@ describe("Destination selection states", () => {
           expect(state.goToBank.onClick).eq(undefined);
           expect(state.goToWallet.onClick).eq(undefined);
 
-        expect(state.amountHandler.value).deep.eq(Amounts.parseOrThrow("ARS:0"));
+          expect(state.amountHandler.value).deep.eq(
+            Amounts.parseOrThrow("ARS:0"),
+          );
         },
-    ], TestingContext)
+      ],
+      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,7 +104,10 @@ describe("Destination selection states", () => {
       amount: "ARS:2",
     };
 
-    const hookBehavior = await tests.hookBehaveLikeThis(useComponentState, props, [
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
         // ({ status }) => {
         //   expect(status).equal("loading");
         // },
@@ -108,12 +117,15 @@ describe("Destination selection states", () => {
           expect(state.goToBank.onClick).not.eq(undefined);
           expect(state.goToWallet.onClick).not.eq(undefined);
 
-        expect(state.amountHandler.value).deep.eq(Amounts.parseOrThrow("ARS:2"));
+          expect(state.amountHandler.value).deep.eq(
+            Amounts.parseOrThrow("ARS:2"),
+          );
         },
-    ], TestingContext)
+      ],
+      TestingContext,
+    );
 
-    expect(hookBehavior).deep.equal({ result: "ok" })
+    expect(hookBehavior).deep.equal({ result: "ok" });
     expect(handler.getCallingQueueState()).eq("empty");
-
   });
 });

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 {

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(
+export function useComponentState({
-  { onCancel, onSelection, list: exchanges, currentExchange }: Props,
+  onCancel,
-): State {
+  onSelection,
-  const api = useBackendContext()
+  list: exchanges,
+  currentExchange,
+}: Props): State {
+  const api = useBackendContext();
   const initialValue = exchanges.findIndex(
     (e) => e.exchangeBaseUrl === currentExchange,
   );

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";

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(
+export function useComponentState({
-  { currency, onAccountAdded, onCancel }: Props,
+  currency,
-): State {
+  onAccountAdded,
-  const api = useBackendContext()
+  onCancel,
+}: Props): State {
+  const api = useBackendContext();
   const hook = useAsyncAsHook(() =>
     api.wallet.call(WalletApiOperation.ListKnownBankAccounts, { currency }),
   );

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;
 

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,

packages/taler-wallet-webextension/src/wxApi.ts

@@ -156,8 +156,8 @@ export type WxApiType = {
   background: BackgroundApiClient;
   listener: {
     onUpdateNotification: typeof onUpdateNotification;
-  }
+  };
-}
+};
 
 export const wxApi = {
   wallet: new WxWalletCoreApiClient(),