added react eslint and fix most of the warns

.eslintrc.js

@@ -1,12 +1,23 @@
 module.exports = {
   root: true,
   parser: "@typescript-eslint/parser",
-  plugins: ["import","@typescript-eslint"],
+  plugins: ["import","@typescript-eslint",
+    "react",
+    "react-hooks",
+  ],
   extends: [
     "eslint:recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
   ],
+  settings: {
+    react: {
+      pragma: 'h',
+      version: '16.0'
+    }
+  },
   rules: {
     "no-constant-condition": ["error", { "checkLoops": false }],
     "prefer-const": ["warn", { destructuring: "all" }],
@@ -25,5 +36,8 @@ module.exports = {
       { functions: false, classes: false },
     ],
     "import/extensions": ["error", "ignorePackages"],
+    "react/no-unknown-property": 0,
+    "react/prop-types": 0, 
+
   },
 };

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

@@ -45,7 +45,7 @@ export class BrowserHttpLib implements HttpRequestLibrary {
     options?: HttpRequestOptions,
   ): Promise<HttpResponse> {
     const requestMethod = options?.method ?? "GET";
-    let requestBody = options?.body;
+    const requestBody = options?.body;
 
     if (this.throttlingEnabled && this.throttle.applyThrottle(requestUrl)) {
       const parsedUrl = new URL(requestUrl);

packages/taler-wallet-webextension/src/components/Banner.stories.tsx

@@ -51,7 +51,7 @@ function SignalWifiOffIcon({ ...rest }: any): VNode {
   return <SvgIcon {...rest} dangerouslySetInnerHTML={{ __html: wifiIcon }} />;
 }
 
-export const BasicExample = () => (
+export const BasicExample = (): VNode => (
   <Fragment>
     <Wrapper>
       <p>
@@ -86,7 +86,7 @@ export const BasicExample = () => (
   </Fragment>
 );
 
-export const PendingOperation = () => (
+export const PendingOperation = (): VNode => (
   <Fragment>
     <Wrapper>
       <Banner

packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx

@@ -24,7 +24,7 @@ interface Props {
   name: string;
 }
 
-const Tick = () => (
+const Tick = (): VNode => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"

packages/taler-wallet-webextension/src/components/ErrorMessage.tsx

@@ -13,7 +13,7 @@
  You should have received a copy of the GNU General Public License along with
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
-import { VNode, h, ComponentChildren } from "preact";
+import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import arrowDown from "../svg/chevron-down.svg";
 import { ErrorBox } from "./styled/index.js";

packages/taler-wallet-webextension/src/components/ExchangeToS.tsx

@@ -23,7 +23,7 @@ export function ExchangeXmlTos({ doc }: { doc: Document }): VNode {
       <div>
         <p>
           The exchange send us an xml but there is no node with
-          'ids=terms-of-service'. This is the content:
+          &apos;ids=terms-of-service&apos;. This is the content:
         </p>
         <pre>{new XMLSerializer().serializeToString(doc)}</pre>
       </div>

packages/taler-wallet-webextension/src/components/LogoHeader.tsx

@@ -14,10 +14,10 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { h } from "preact";
+import { h, VNode } from "preact";
 import logo from "../svg/logo-2021.svg";
 
-export function LogoHeader() {
+export function LogoHeader(): VNode {
   return (
     <div
       style={{

packages/taler-wallet-webextension/src/components/Part.tsx

@@ -13,9 +13,8 @@
  You should have received a copy of the GNU General Public License along with
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
-import { AmountLike } from "@gnu-taler/taler-util";
-import { ExtraLargeText, LargeText, SmallLightText } from "./styled/index.js";
 import { h, VNode } from "preact";
+import { ExtraLargeText, LargeText, SmallLightText } from "./styled/index.js";
 
 export type Kind = "positive" | "negative" | "neutral";
 interface Props {
@@ -24,7 +23,7 @@ interface Props {
   kind: Kind;
   big?: boolean;
 }
-export function Part({ text, title, kind, big }: Props) {
+export function Part({ text, title, kind, big }: Props): VNode {
   const Text = big ? ExtraLargeText : LargeText;
   return (
     <div style={{ margin: "1em" }}>

packages/taler-wallet-webextension/src/components/PendingTransactions.stories.tsx

@@ -19,14 +19,13 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { PendingTransactionsView as TestedComponent } from "./PendingTransactions.js";
-import { Fragment, h, VNode } from "preact";
-import { createExample } from "../test-utils.js";
 import {
   TalerProtocolTimestamp,
   Transaction,
   TransactionType,
 } from "@gnu-taler/taler-util";
+import { createExample } from "../test-utils.js";
+import { PendingTransactionsView as TestedComponent } from "./PendingTransactions.js";
 
 export default {
   title: "component/PendingTransactions",

packages/taler-wallet-webextension/src/components/PendingTransactions.tsx

@@ -4,20 +4,19 @@ import {
   NotificationType,
   Transaction,
 } from "@gnu-taler/taler-util";
-import { PendingTaskInfo } from "@gnu-taler/taler-wallet-core";
+import { Fragment, h, JSX, VNode } from "preact";
-import { Fragment, h, JSX } from "preact";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
 import { Avatar } from "../mui/Avatar.js";
 import { Typography } from "../mui/Typography.js";
+import * as wxApi from "../wxApi.js";
 import Banner from "./Banner.js";
 import { Time } from "./Time.js";
-import * as wxApi from "../wxApi.js";
 
 interface Props extends JSX.HTMLAttributes {
   goToTransaction: (id: string) => void;
 }
 
-export function PendingTransactions({ goToTransaction }: Props) {
+export function PendingTransactions({ goToTransaction }: Props): VNode {
   const state = useAsyncAsHook(wxApi.getTransactions, [
     NotificationType.WithdrawGroupFinished,
   ]);
@@ -43,7 +42,7 @@ export function PendingTransactionsView({
 }: {
   goToTransaction: (id: string) => void;
   transactions: Transaction[];
-}) {
+}): VNode {
   return (
     <Banner
       title="PENDING OPERATIONS"

packages/taler-wallet-webextension/src/components/styled/index.tsx

@@ -16,7 +16,6 @@
 
 // need to import linaria types, otherwise compiler will complain
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-// eslint-disable-next-line no-unused-vars
 import type * as Linaria from "@linaria/core";
 
 import { styled } from "@linaria/react";

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

@@ -41,7 +41,7 @@ export const DevContextProviderForTesting = ({ value, children }: { value: boole
 export const DevContextProvider = ({ children }: { children: any }): VNode => {
   const [value, setter] = useLocalStorage("devMode");
   const devMode = value === "true";
-  const toggleDevMode = () => setter((v) => (!v ? "true" : undefined));
+  const toggleDevMode = (): void => setter((v) => (!v ? "true" : undefined));
   children = children.length === 1 && typeof children === "function" ? children({ devMode }) : children;
   return h(Context.Provider, { value: { devMode, toggleDevMode }, children });
 };

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

@@ -19,13 +19,11 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
+import { i18n, setupI18n } from "@gnu-taler/taler-util";
 import { createContext, h, VNode } from "preact";
 import { useContext, useEffect } from "preact/hooks";
 import { useLang } from "../hooks/useLang.js";
-//@ts-ignore: type declaration
-import * as jedLib from "jed";
 import { strings } from "../i18n/strings.js";
-import { setupI18n, i18n } from "@gnu-taler/taler-util";
 
 interface Type {
   lang: string;

packages/taler-wallet-webextension/src/cta/Deposit.tsx

@@ -33,7 +33,6 @@ import {
   NotificationType,
   PreparePayResult,
   PreparePayResultType,
-  Translate,
 } from "@gnu-taler/taler-util";
 import { TalerError } from "@gnu-taler/taler-wallet-core";
 import { Fragment, h, VNode } from "preact";

packages/taler-wallet-webextension/src/cta/Pay.tsx

@@ -48,7 +48,6 @@ import { QR } from "../components/QR.js";
 import {
   ButtonSuccess,
   Link,
-  LinkPrimary,
   LinkSuccess,
   SmallLightText,
   SubTitle,

packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx

@@ -37,7 +37,7 @@ export function TermsOfServiceSection({
               <section>
                 <WarningText>
                   <i18n.Translate>
-                    Exchange doesn't have terms of service
+                    Exchange doesn&apos;t have terms of service
                   </i18n.Translate>
                 </WarningText>
               </section>
@@ -51,7 +51,7 @@ export function TermsOfServiceSection({
             <section>
               <WarningText>
                 <i18n.Translate>
-                  Exchange doesn't have terms of service
+                  Exchange doesn&apos;t have terms of service
                 </i18n.Translate>
               </WarningText>
             </section>

packages/taler-wallet-webextension/src/cta/Tip.stories.tsx

@@ -19,7 +19,7 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { AbsoluteTime, TalerProtocolTimestamp } from "@gnu-taler/taler-util";
+import { TalerProtocolTimestamp } from "@gnu-taler/taler-util";
 import { createExample } from "../test-utils.js";
 import { View as TestedComponent } from "./Tip.js";
 

packages/taler-wallet-webextension/src/cta/Tip.tsx

@@ -101,7 +101,7 @@ export function TipPage({ talerTipUri }: Props): VNode {
     doFetch();
   }, [talerTipUri, updateCounter]);
 
-  const doAccept = async () => {
+  const doAccept = async (): Promise<void> => {
     if (!prepareTipResult) {
       return;
     }
@@ -109,7 +109,7 @@ export function TipPage({ talerTipUri }: Props): VNode {
     setUpdateCounter(updateCounter + 1);
   };
 
-  const doIgnore = () => {
+  const doIgnore = (): void => {
     setTipIgnored(true);
   };
 
@@ -124,7 +124,7 @@ export function TipPage({ talerTipUri }: Props): VNode {
   if (tipIgnored) {
     return (
       <span>
-        <i18n.Translate>You've ignored the tip.</i18n.Translate>
+        <i18n.Translate>You&apos;ve ignored the tip.</i18n.Translate>
       </span>
     );
   }

packages/taler-wallet-webextension/src/cta/Withdraw.tsx

@@ -104,7 +104,7 @@ export function View({
       {},
     );
 
-  async function doWithdrawAndCheckError() {
+  async function doWithdrawAndCheckError(): Promise<void> {
     try {
       setConfirmDisabled(true);
       await onWithdraw();

packages/taler-wallet-webextension/src/cta/return-coins.tsx

@@ -25,7 +25,7 @@ import { useTranslationContext } from "../context/translation.js";
 /**
  * Imports.
  */
-export function createReturnCoinsPage(): VNode {
+export function CreateReturnCoinsPage(): VNode {
   const { i18n } = useTranslationContext();
   return (
     <span>

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

@@ -14,9 +14,7 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 import {
-  NotificationType,
+  NotificationType, TalerErrorDetail
-  TalerErrorCode,
-  TalerErrorDetail,
 } from "@gnu-taler/taler-util";
 import { TalerError } from "@gnu-taler/taler-wallet-core";
 import { useEffect, useState } from "preact/hooks";
@@ -50,7 +48,7 @@ export function useAsyncAsHook<T>(
 ): HookResponse<T> {
   const [result, setHookResponse] = useState<HookResponse<T>>(undefined);
   useEffect(() => {
-    async function doAsync() {
+    async function doAsync(): Promise<void> {
       try {
         const response = await fn();
         setHookResponse({ hasError: false, response });
@@ -76,6 +74,6 @@ export function useAsyncAsHook<T>(
         doAsync();
       });
     }
-  }, []);
+  });
   return result;
 }

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

@@ -29,11 +29,11 @@ export function useBackupDeviceName(): BackupDeviceName {
   });
 
   useEffect(() => {
-    async function run() {
+    async function run(): Promise<void> {
       //create a first list of backup info by currency
       const status = await wxApi.getBackupInfo();
 
-      async function update(newName: string) {
+      async function update(newName: string): Promise<void> {
         await wxApi.setWalletDeviceId(newName);
         setStatus((old) => ({ ...old, name: newName }));
       }

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

@@ -22,7 +22,7 @@ import { getReadRequestPermissions } from "../permissions.js";
 export function useExtendedPermissions(): [boolean, () => Promise<void>] {
   const [enabled, setEnabled] = useState(false);
 
-  const toggle = async () => {
+  const toggle = async (): Promise<void> => {
     return handleExtendedPerm(enabled, setEnabled)
   };
 

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

@@ -35,7 +35,7 @@ export function useLocalStorage(
 
   const setValue = (
     value?: string | ((val?: string) => string | undefined),
-  ) => {
+  ): void => {
     setStoredValue((p) => {
       const toStore = value instanceof Function ? value(p) : value;
       if (typeof window !== "undefined") {
@@ -63,7 +63,7 @@ export function useNotNullLocalStorage(
       : initialValue;
   });
 
-  const setValue = (value: string | ((val: string) => string)) => {
+  const setValue = (value: string | ((val: string) => string)): void => {
     const valueToStore = value instanceof Function ? value(storedValue) : value;
     setStoredValue(valueToStore);
     if (typeof window !== "undefined") {

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

@@ -28,7 +28,7 @@ export function useProviderStatus(url: string): ProviderStatus | undefined {
   const [status, setStatus] = useState<ProviderStatus | undefined>(undefined);
 
   useEffect(() => {
-    async function run() {
+    async function run(): Promise<void> {
       //create a first list of backup info by currency
       const status = await wxApi.getBackupInfo();
 
@@ -37,13 +37,13 @@ export function useProviderStatus(url: string): ProviderStatus | undefined {
       );
       const info = providers.length ? providers[0] : undefined;
 
-      async function sync() {
+      async function sync(): Promise<void> {
         if (info) {
           await wxApi.syncOneProvider(info.syncProviderBaseUrl);
         }
       }
 
-      async function remove() {
+      async function remove(): Promise<void> {
         if (info) {
           await wxApi.removeProvider(info.syncProviderBaseUrl);
         }
@@ -52,7 +52,7 @@ export function useProviderStatus(url: string): ProviderStatus | undefined {
       setStatus({ info, sync, remove });
     }
     run();
-  }, []);
+  });
 
   return status;
 }

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

@@ -33,7 +33,7 @@ export function useTalerActionURL(): [
       setTalerActionUrl(talerUri);
     }
     check();
-  }, []);
+  });
   const url = dismissed ? undefined : talerActionUrl;
   return [url, setDismissed];
 }

packages/taler-wallet-webextension/src/mui/Avatar.tsx

@@ -18,21 +18,21 @@ const root = css`
   user-select: none;
 `;
 
-const colorStyle = css`
+// const colorStyle = css`
-  color: ${theme.palette.background.default};
+//   color: ${theme.palette.background.default};
-  background-color: ${theme.palette.mode === "light"
+//   background-color: ${theme.palette.mode === "light"
-    ? theme.palette.grey[400]
+//     ? theme.palette.grey[400]
-    : theme.palette.grey[600]};
+//     : theme.palette.grey[600]};
-`;
+// `;
 
-const avatarImageStyle = css`
+// const avatarImageStyle = css`
-  width: 100%;
+//   width: 100%;
-  height: 100%;
+//   height: 100%;
-  text-align: center;
+//   text-align: center;
-  object-fit: cover;
+//   object-fit: cover;
-  color: transparent;
+//   color: transparent;
-  text-indent: 10000;
+//   text-indent: 10000;
-`;
+// `;
 
 interface Props extends JSX.HTMLAttributes<HTMLDivElement> {
   variant?: "circular" | "rounded" | "square";

packages/taler-wallet-webextension/src/mui/Button.stories.tsx

@@ -20,7 +20,7 @@
  */
 
 import { Button } from "./Button.js";
-import { Fragment, h } from "preact";
+import { Fragment, h, VNode } from "preact";
 import DeleteIcon from "../svg/delete_24px.svg";
 import SendIcon from "../svg/send_24px.svg";
 import { styled } from "@linaria/react";
@@ -35,7 +35,7 @@ const Stack = styled.div`
   flex-direction: column;
 `;
 
-export const BasicExample = () => (
+export const BasicExample = (): VNode => (
   <Fragment>
     <Stack>
       <Button size="small" variant="text">
@@ -67,7 +67,7 @@ export const BasicExample = () => (
   </Fragment>
 );
 
-export const Others = () => (
+export const Others = (): VNode => (
   <Fragment>
     <p>colors</p>
     <Stack>
@@ -94,7 +94,7 @@ export const Others = () => (
   </Fragment>
 );
 
-export const WithIcons = () => (
+export const WithIcons = (): VNode => (
   <Fragment>
     <Stack>
       <Button variant="outlined" size="small" startIcon={DeleteIcon}>

packages/taler-wallet-webextension/src/mui/Grid.stories.tsx

@@ -20,14 +20,14 @@
  */
 
 import { Grid } from "./Grid.js";
-import { Fragment, h } from "preact";
+import { Fragment, h, VNode } from "preact";
 
 export default {
   title: "mui/grid",
   component: Grid,
 };
 
-function Item({ children }: any) {
+function Item({ children }: any): VNode {
   return (
     <div
       style={{
@@ -42,7 +42,7 @@ function Item({ children }: any) {
   );
 }
 
-function Wrapper({ children }: any) {
+function Wrapper({ children }: any): VNode {
   return (
     <div
       style={{
@@ -60,7 +60,7 @@ function Wrapper({ children }: any) {
   );
 }
 
-export const BasicExample = () => (
+export const BasicExample = (): VNode => (
   <Fragment>
     <Wrapper>
       <Grid container spacing={2}>
@@ -97,7 +97,7 @@ export const BasicExample = () => (
   </Fragment>
 );
 
-export const Responsive12ColumnsSize = () => (
+export const Responsive12ColumnsSize = (): VNode => (
   <Fragment>
     <Wrapper>
       <p>Item size is responsive: xs=6 sm=4 md=2</p>
@@ -122,7 +122,7 @@ export const Responsive12ColumnsSize = () => (
   </Fragment>
 );
 
-export const Responsive12Spacing = () => (
+export const Responsive12Spacing = (): VNode => (
   <Fragment>
     <Wrapper>
       <p>Item space is responsive: xs=1 sm=2 md=3</p>
@@ -178,7 +178,7 @@ export const Responsive12Spacing = () => (
   </Fragment>
 );
 
-export const ResponsiveAuthWidth = () => (
+export const ResponsiveAuthWidth = (): VNode => (
   <Fragment>
     <Wrapper>
       <Grid container columns={12}>
@@ -198,7 +198,7 @@ export const ResponsiveAuthWidth = () => (
     </Wrapper>
   </Fragment>
 );
-export const Example = () => (
+export const Example = (): VNode => (
   <Wrapper>
     <p>Item row space is responsive: xs=6 sm=4 md=1</p>
     <Grid container rowSpacing={3} columnSpacing={1} columns={12}>

packages/taler-wallet-webextension/src/mui/Grid.tsx

@@ -64,7 +64,7 @@ export interface Props extends JSX.HTMLAttributes<HTMLDivElement> {
 }
 theme.breakpoints.up;
 
-function getOffset(val: number | string) {
+function getOffset(val: number | string): string | number {
   if (typeof val === "number") `${val}px`;
   return val;
 }
@@ -324,7 +324,7 @@ function relation(
   cols: Partial<ResponsiveSize>,
   values: Partial<ResponsiveSize>,
   size: ResponsiveKeys,
-) {
+): string {
   const colsNum = typeof cols === "number" ? cols : cols[size] || 12;
   return (
     String(Math.round(((values[size] || 1) / colsNum) * 10e7) / 10e5) + "%"

packages/taler-wallet-webextension/src/mui/Paper.stories.tsx

@@ -19,16 +19,15 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
+import { h, VNode } from "preact";
 import { Paper } from "./Paper.js";
-import { createExample } from "../test-utils.js";
-import { h } from "preact";
 
 export default {
   title: "mui/paper",
   component: Paper,
 };
 
-export const BasicExample = () => (
+export const BasicExample = (): VNode => (
   <div
     style={{
       display: "flex",
@@ -54,7 +53,7 @@ export const BasicExample = () => (
   </div>
 );
 
-export const Outlined = () => (
+export const Outlined = (): VNode => (
   <div
     style={{
       display: "flex",
@@ -92,7 +91,7 @@ export const Outlined = () => (
   </div>
 );
 
-export const Elevation = () => (
+export const Elevation = (): VNode => (
   <div
     style={{
       display: "flex",
@@ -119,7 +118,7 @@ export const Elevation = () => (
   </div>
 );
 
-export const ElevationDark = () => (
+export const ElevationDark = (): VNode => (
   <div
     class="theme-dark"
     style={{

packages/taler-wallet-webextension/src/mui/TextField.stories.tsx

@@ -20,7 +20,7 @@
  */
 
 import { styled } from "@linaria/react";
-import { Fragment, h } from "preact";
+import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { TextField, Props } from "./TextField.js";
 
@@ -37,7 +37,7 @@ const Container = styled.div`
   }
 `;
 
-const BasicExample = (variant: Props["variant"]) => {
+const BasicExample = (variant: Props["variant"]): VNode => {
   const [value, onChange] = useState("");
   return (
     <Container>
@@ -80,11 +80,11 @@ const BasicExample = (variant: Props["variant"]) => {
   );
 };
 
-export const Standard = () => BasicExample("standard");
+export const Standard = (): VNode => BasicExample("standard");
-export const Filled = () => BasicExample("filled");
+export const Filled = (): VNode => BasicExample("filled");
-export const Outlined = () => BasicExample("outlined");
+export const Outlined = (): VNode => BasicExample("outlined");
 
-export const Color = () => (
+export const Color = (): VNode => (
   <Container>
     <TextField
       variant="standard"

packages/taler-wallet-webextension/src/mui/colors/manipulation.ts

@@ -142,7 +142,7 @@ export function hslToRgb(color: string): string {
   const s = values[1] / 100;
   const l = values[2] / 100;
   const a = s * Math.min(l, 1 - l);
-  const f = (n: number, k = (n + h / 30) % 12) => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+  const f = (n: number, k = (n + h / 30) % 12): number => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
 
   if (colorObj.type === 'hsla') {
     return recomposeColor({

packages/taler-wallet-webextension/src/mui/input/FormControl.tsx

@@ -1,5 +1,5 @@
 import { css } from "@linaria/core";
-import { ComponentChildren, createContext, h } from "preact";
+import { ComponentChildren, createContext, h, VNode } from "preact";
 import { useContext, useState } from "preact/hooks";
 // eslint-disable-next-line import/extensions
 import { Colors } from "../style";
@@ -58,7 +58,7 @@ export function FormControl({
   size = "medium",
   variant = "standard",
   children,
-}: Partial<Props>) {
+}: Partial<Props>): VNode {
   const [filled, setFilled] = useState(false);
   const [focusedState, setFocused] = useState(false);
   const focused =
@@ -141,7 +141,7 @@ const defaultContextValue: FCCProps = {
   variant: "outlined",
 };
 
-function withoutUndefinedProperties(obj: any) {
+function withoutUndefinedProperties(obj: any): any {
   return Object.keys(obj).reduce((acc, key) => {
     const _acc: any = acc;
     if (obj[key] !== undefined) _acc[key] = obj[key];

packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx

@@ -1,5 +1,5 @@
 import { css } from "@linaria/core";
-import { ComponentChildren, h } from "preact";
+import { ComponentChildren, h, VNode } from "preact";
 // eslint-disable-next-line import/extensions
 import { theme } from "../style";
 import { useFormControl } from "./FormControl.js";
@@ -35,7 +35,7 @@ interface Props {
   required?: boolean;
   children: ComponentChildren;
 }
-export function FormHelperText({ children, ...props }: Props) {
+export function FormHelperText({ children, ...props }: Props): VNode {
   const fcs = useFormControl(props);
   const contained = fcs.variant === "filled" || fcs.variant === "outlined";
   return (

packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx

@@ -1,5 +1,5 @@
 import { css } from "@linaria/core";
-import { ComponentChildren, h } from "preact";
+import { ComponentChildren, h, VNode } from "preact";
 // eslint-disable-next-line import/extensions
 import { Colors, theme } from "../style";
 import { useFormControl } from "./FormControl.js";
@@ -41,7 +41,7 @@ export function FormLabel({
   class: _class,
   children,
   ...rest
-}: Props) {
+}: Props): VNode {
   const fcs = useFormControl({
     disabled,
     error,

packages/taler-wallet-webextension/src/mui/input/InputBase.tsx

@@ -1,5 +1,5 @@
 import { css } from "@linaria/core";
-import { h, JSX } from "preact";
+import { h, JSX, VNode } from "preact";
 import { useLayoutEffect } from "preact/hooks";
 // eslint-disable-next-line import/extensions
 import { theme } from "../style";
@@ -33,7 +33,7 @@ export function InputBaseRoot({
   focused,
   fullWidth,
   children,
-}: any) {
+}: any): VNode {
   const fcs = useFormControl({});
   return (
     <div
@@ -129,7 +129,7 @@ export function InputBaseComponent({
   multiline,
   type,
   ...props
-}: any) {
+}: any): VNode {
   return (
     <input
       disabled={disabled}
@@ -160,7 +160,7 @@ export function InputBase({
   value,
   onClick,
   ...props
-}: any) {
+}: any): VNode {
   const fcs = useFormControl(props);
   // const [focused, setFocused] = useState(false);
   useLayoutEffect(() => {
@@ -171,7 +171,7 @@ export function InputBase({
     }
   }, [value]);
 
-  const handleFocus = (event: JSX.TargetedFocusEvent<EventTarget>) => {
+  const handleFocus = (event: JSX.TargetedFocusEvent<EventTarget>): void => {
     // Fix a bug with IE11 where the focus/blur events are triggered
     // while the component is disabled.
     if (fcs.disabled) {
@@ -189,7 +189,7 @@ export function InputBase({
     fcs.onFocus();
   };
 
-  const handleBlur = () => {
+  const handleBlur = (): void => {
     // if (onBlur) {
     //   onBlur(event);
     // }
@@ -202,7 +202,7 @@ export function InputBase({
 
   const handleChange = (
     event: JSX.TargetedEvent<HTMLElement & { value?: string }>,
-  ) => {
+  ): void => {
     // if (inputPropsProp.onChange) {
     //   inputPropsProp.onChange(event, ...args);
     // }
@@ -215,7 +215,7 @@ export function InputBase({
 
   const handleClick = (
     event: JSX.TargetedMouseEvent<HTMLElement & { value?: string }>,
-  ) => {
+  ): void => {
     // if (inputRef.current && event.currentTarget === event.target) {
     //   inputRef.current.focus();
     // }
@@ -254,6 +254,6 @@ export function InputBase({
   );
 }
 
-export function TextareaAutoSize() {
+export function TextareaAutoSize(): VNode {
   return <input onClick={(e) => null} />;
 }

packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx

@@ -1,5 +1,5 @@
 import { css } from "@linaria/core";
-import { ComponentChildren, h } from "preact";
+import { ComponentChildren, h, VNode } from "preact";
 // eslint-disable-next-line import/extensions
 import { Colors, theme } from "../style";
 import { useFormControl } from "./FormControl.js";
@@ -83,7 +83,7 @@ interface InputLabelProps {
   variant: "filled" | "outlined" | "standard";
   children: ComponentChildren;
 }
-export function InputLabel(props: Partial<InputLabelProps>) {
+export function InputLabel(props: Partial<InputLabelProps>): VNode {
   const fcs = useFormControl(props);
   return (
     <FormLabel

packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx

@@ -107,7 +107,7 @@ const underlineStyle = css`
   }
 `;
 
-function Root({ disabled, focused, error, children }: any) {
+function Root({ disabled, focused, error, children }: any): VNode {
   return (
     <InputBaseRoot
       disabled={disabled}
@@ -120,6 +120,6 @@ function Root({ disabled, focused, error, children }: any) {
   );
 }
 
-function Input(props: any) {
+function Input(props: any): VNode {
   return <InputBaseComponent {...props} />;
 }

packages/taler-wallet-webextension/src/mui/style.tsx

@@ -1,14 +1,15 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { css } from "@linaria/core";
 import { darken, lighten } from "polished";
 import {
-  common,
-  purple,
-  red,
-  orange,
   blue,
-  lightBlue,
+  common,
   green,
   grey,
+  lightBlue,
+  orange,
+  purple,
+  red,
   // eslint-disable-next-line import/extensions
 } from "./colors/constants";
 // eslint-disable-next-line import/extensions
@@ -430,20 +431,20 @@ function createTheme() {
   /////////////////////
   ///////////////////// MIXINS
   /////////////////////
-  function createMixins(breakpoints: any, spacing: any, mixins: any) {
+  // function createMixins(breakpoints: any, spacing: any, mixins: any) {
-    return {
+  //   return {
-      toolbar: {
+  //     toolbar: {
-        minHeight: 56,
+  //       minHeight: 56,
-        [`${breakpoints.up("xs")} and (orientation: landscape)`]: {
+  //       [`${breakpoints.up("xs")} and (orientation: landscape)`]: {
-          minHeight: 48,
+  //         minHeight: 48,
-        },
+  //       },
-        [breakpoints.up("sm")]: {
+  //       [breakpoints.up("sm")]: {
-          minHeight: 64,
+  //         minHeight: 64,
-        },
+  //       },
-      },
+  //     },
-      ...mixins,
+  //     ...mixins,
-    };
+  //   };
-  }
+  // }
 
   /////////////////////
   ///////////////////// TRANSITION

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

@@ -14,7 +14,8 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-export const getReadRequestPermissions = () => ({
+const perms = {
   permissions: ["webRequest", "webRequestBlocking"],
   origins: ["http://*/*", "https://*/*"],
-})
+}
+export const getReadRequestPermissions = (): typeof perms => perms

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

@@ -14,7 +14,7 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { CoreApiResponse, NotificationType, TalerUriType } from "@gnu-taler/taler-util";
+import { CoreApiResponse, NotificationType } from "@gnu-taler/taler-util";
 
 export interface Permissions {
   /**
@@ -186,6 +186,6 @@ export interface PlatformAPI {
 }
 
 export let platform: PlatformAPI = undefined as any;
-export function setupPlatform(impl: PlatformAPI) {
+export function setupPlatform(impl: PlatformAPI): void {
   platform = impl;
 }

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

@@ -99,7 +99,7 @@ function getPermissionsApi(): CrossBrowserPermissionsApi {
  * 
  * @param callback function to be called
  */
-function notifyWhenAppIsReady(callback: () => void) {
+function notifyWhenAppIsReady(callback: () => void): void {
   if (chrome.runtime && chrome.runtime.getManifest().manifest_version === 3) {
     callback()
   } else {
@@ -108,7 +108,7 @@ function notifyWhenAppIsReady(callback: () => void) {
 }
 
 
-function openWalletURIFromPopup(talerUri: string) {
+function openWalletURIFromPopup(talerUri: string): void {
   const uriType = classifyTalerUri(talerUri);
 
   let url: string | undefined = undefined;
@@ -138,14 +138,14 @@ function openWalletURIFromPopup(talerUri: string) {
   );
 }
 
-function openWalletPage(page: string) {
+function openWalletPage(page: string): void {
   const url = chrome.runtime.getURL(`/static/wallet.html#${page}`)
   chrome.tabs.create(
     { active: true, url, },
   );
 }
 
-function openWalletPageFromPopup(page: string) {
+function openWalletPageFromPopup(page: string): void {
   const url = chrome.runtime.getURL(`/static/wallet.html#${page}`)
   chrome.tabs.create(
     { active: true, url, },
@@ -167,12 +167,12 @@ async function sendMessageToWalletBackground(operation: string, payload: any): P
 }
 
 let notificationPort: chrome.runtime.Port | undefined;
-function listenToWalletBackground(listener: (m: any) => void) {
+function listenToWalletBackground(listener: (m: any) => void): () => void {
   if (notificationPort === undefined) {
     notificationPort = chrome.runtime.connect({ name: "notifications" })
   }
   notificationPort.onMessage.addListener(listener)
-  function removeListener() {
+  function removeListener(): void {
     if (notificationPort !== undefined) {
       notificationPort.onMessage.removeListener(listener)
     }
@@ -183,7 +183,7 @@ function listenToWalletBackground(listener: (m: any) => void) {
 
 const allPorts: chrome.runtime.Port[] = [];
 
-function sendMessageToAllChannels(message: MessageFromBackend) {
+function sendMessageToAllChannels(message: MessageFromBackend): void {
   for (const notif of allPorts) {
     // const message: MessageFromBackend = { type: msg.type };
     try {
@@ -194,7 +194,7 @@ function sendMessageToAllChannels(message: MessageFromBackend) {
   }
 }
 
-function registerAllIncomingConnections() {
+function registerAllIncomingConnections(): void {
   chrome.runtime.onConnect.addListener((port) => {
     allPorts.push(port);
     port.onDisconnect.addListener((discoPort) => {
@@ -206,7 +206,7 @@ function registerAllIncomingConnections() {
   });
 }
 
-function listenToAllChannels(cb: (message: any, sender: any, callback: (r: CoreApiResponse) => void) => void) {
+function listenToAllChannels(cb: (message: any, sender: any, callback: (r: CoreApiResponse) => void) => void): void {
   chrome.runtime.onMessage.addListener((m, s, c) => {
     cb(m, s, c)
 
@@ -215,7 +215,7 @@ function listenToAllChannels(cb: (message: any, sender: any, callback: (r: CoreA
   });
 }
 
-function registerReloadOnNewVersion() {
+function registerReloadOnNewVersion(): void {
   // Explicitly unload the extension page as soon as an update is available,
   // so the update gets installed as soon as possible.
   chrome.runtime.onUpdateAvailable.addListener((details) => {
@@ -228,7 +228,7 @@ function registerReloadOnNewVersion() {
 function redirectTabToWalletPage(
   tabId: number,
   page: string,
-) {
+): void {
   const url = chrome.runtime.getURL(`/static/wallet.html#${page}`);
   console.log("redirecting tabId: ", tabId, " to: ", url);
   chrome.tabs.update(tabId, { url });
@@ -250,7 +250,7 @@ function registerTalerHeaderListener(callback: (tabId: number, url: string) => v
 
   function headerListener(
     details: chrome.webRequest.WebResponseHeadersDetails,
-  ) {
+  ): void {
     if (chrome.runtime.lastError) {
       console.error(JSON.stringify(chrome.runtime.lastError));
       return;
@@ -299,7 +299,7 @@ function registerTalerHeaderListener(callback: (tabId: number, url: string) => v
   });
 }
 
-function registerOnInstalled(callback: () => void) {
+function registerOnInstalled(callback: () => void): void {
   // This needs to be outside of main, as Firefox won't fire the event if
   // the listener isn't created synchronously on loading the backend.
   chrome.runtime.onInstalled.addListener((details) => {
@@ -310,7 +310,7 @@ function registerOnInstalled(callback: () => void) {
   });
 }
 
-function useServiceWorkerAsBackgroundProcess() {
+function useServiceWorkerAsBackgroundProcess(): boolean {
   return chrome.runtime.getManifest().manifest_version === 3
 }
 
@@ -323,9 +323,9 @@ function searchForTalerLinks(): string | undefined {
   return undefined
 }
 
-async function getCurrentTab() {
+async function getCurrentTab(): Promise<chrome.tabs.Tab> {
-  let queryOptions = { active: true, currentWindow: true };
+  const queryOptions = { active: true, currentWindow: true };
-  let [tab] = await chrome.tabs.query(queryOptions);
+  const [tab] = await chrome.tabs.query(queryOptions);
   return tab;
 }
 

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

@@ -14,7 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { classifyTalerUri, CoreApiResponse, TalerUriType } from "@gnu-taler/taler-util";
+import { CoreApiResponse } from "@gnu-taler/taler-util";
 import { MessageFromBackend, PlatformAPI } from "./api.js";
 
 const frames = ["popup", "wallet"]
@@ -30,7 +30,7 @@ const api: PlatformAPI = ({
   }),
   notifyWhenAppIsReady: (fn: () => void) => {
     let total = frames.length
-    function waitAndNotify() {
+    function waitAndNotify(): void {
       total--
       if (total < 1) {
         console.log('done')
@@ -96,7 +96,7 @@ const api: PlatformAPI = ({
     })
   },
   listenToWalletBackground: (onNewMessage: (m: MessageFromBackend) => void) => {
-    function listener(event: MessageEvent<IframeMessageType>) {
+    function listener(event: MessageEvent<IframeMessageType>): void {
       if (event.data.type !== 'notification') return
       onNewMessage(event.data.body)
     }
@@ -115,7 +115,7 @@ const api: PlatformAPI = ({
     window.parent.postMessage(message)
 
     return new Promise((res, rej) => {
-      function listener(event: MessageEvent<IframeMessageType>) {
+      function listener(event: MessageEvent<IframeMessageType>): void {
         if (event.data.type !== "response" || event.data.header.responseId !== replyMe) {
           return
         }

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

@@ -50,7 +50,7 @@ function getPermissionsApi(): CrossBrowserPermissionsApi {
  * 
  * @param callback function to be called
  */
-function notifyWhenAppIsReady(callback: () => void) {
+function notifyWhenAppIsReady(callback: () => void): void {
   if (chrome.runtime && chrome.runtime.getManifest().manifest_version === 3) {
     callback()
   } else {
@@ -62,13 +62,13 @@ function notifyWhenAppIsReady(callback: () => void) {
 function redirectTabToWalletPage(
   tabId: number,
   page: string,
-) {
+): void {
   const url = chrome.runtime.getURL(`/static/wallet.html#${page}`);
   console.log("redirecting tabId: ", tabId, " to: ", url);
   chrome.tabs.update(tabId, { url, loadReplace: true } as any);
 }
 
 
-function useServiceWorkerAsBackgroundProcess() {
+function useServiceWorkerAsBackgroundProcess(): false {
   return false
 }

packages/taler-wallet-webextension/src/popup/BalancePage.tsx

@@ -14,12 +14,7 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import {
+import { Amounts, Balance, NotificationType } from "@gnu-taler/taler-util";
-  Amounts,
-  Balance,
-  NotificationType,
-  Transaction,
-} from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { BalanceTable } from "../components/BalanceTable.js";

packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx

@@ -20,7 +20,7 @@
  */
 
 import { classifyTalerUri, TalerUriType } from "@gnu-taler/taler-util";
-import { Fragment, h } from "preact";
+import { Fragment, h, VNode } from "preact";
 import { platform } from "../platform/api.js";
 import {
   ButtonPrimary,
@@ -34,10 +34,10 @@ export interface Props {
   onDismiss: () => void;
 }
 
-export function TalerActionFound({ url, onDismiss }: Props) {
+export function TalerActionFound({ url, onDismiss }: Props): VNode {
   const uriType = classifyTalerUri(url);
   const { i18n } = useTranslationContext();
-  function redirectToWallet() {
+  function redirectToWallet(): void {
     platform.openWalletURIFromPopup(url);
   }
   return (

packages/taler-wallet-webextension/src/popupEntryPoint.dev.tsx

@@ -21,7 +21,7 @@
  */
 
 import { setupI18n } from "@gnu-taler/taler-util";
-import { Fragment, h, render } from "preact";
+import { h, render } from "preact";
 import { strings } from "./i18n/strings.js";
 import { setupPlatform } from "./platform/api.js";
 import devAPI from "./platform/dev.js";

packages/taler-wallet-webextension/src/popupEntryPoint.tsx

@@ -21,7 +21,7 @@
  */
 
 import { setupI18n } from "@gnu-taler/taler-util";
-import { Fragment, h, render } from "preact";
+import { h, render } from "preact";
 import { strings } from "./i18n/strings.js";
 import { setupPlatform } from "./platform/api.js";
 import chromeAPI from "./platform/chrome.js";

packages/taler-wallet-webextension/src/stories.tsx

@@ -155,13 +155,19 @@ function findByGroupComponentName(
 }
 
 function getContentForExample(item: ExampleItem | undefined): () => VNode {
-  if (!item) return () => <div>select example from the list on the left</div>;
+  if (!item)
+    return function SelectExampleMessage() {
+      return <div>select example from the list on the left</div>;
+    };
   const example = findByGroupComponentName(
     item.group,
     item.component,
     item.name,
   );
-  if (!example) return () => <div>example not found</div>;
+  if (!example)
+    return function ExampleNotFoundMessage() {
+      return <div>example not found</div>;
+    };
   return () => example.render(example.render.args);
 }
 
@@ -181,14 +187,14 @@ function ExampleList({
       <div onClick={() => setOpen(!open)}>{name}</div>
       {open &&
         list.map((k) => (
-          <li>
+          <li key={k.name}>
             <dl>
               <dt>{k.name}</dt>
               {k.examples.map((r) => {
                 const e = encodeURIComponent;
                 const eId = `${e(r.group)}-${e(r.component)}-${e(r.name)}`;
                 return (
-                  <dd id={eId}>
+                  <dd id={eId} key={r.name}>
                     <a href={`#${eId}`}>{r.name}</a>
                   </dd>
                 );
@@ -203,20 +209,24 @@ function ExampleList({
 function getWrapperForGroup(group: string): FunctionComponent {
   switch (group) {
     case "popup":
-      return ({ children }: any) => (
+      return function PopupWrapper({ children }: any) {
-        <Fragment>
+        return (
-          <PopupNavBar />
+          <Fragment>
-          <PopupBox>{children}</PopupBox>
+            <PopupNavBar />
-        </Fragment>
+            <PopupBox>{children}</PopupBox>
-      );
+          </Fragment>
+        );
+      };
     case "wallet":
-      return ({ children }: any) => (
+      return function WalletWrapper({ children }: any) {
-        <Fragment>
+        return (
-          <LogoHeader />
+          <Fragment>
-          <WalletNavBar />
+            <LogoHeader />
-          <WalletBox>{children}</WalletBox>
+            <WalletNavBar />
-        </Fragment>
+            <WalletBox>{children}</WalletBox>
-      );
+          </Fragment>
+        );
+      };
     default:
       return Fragment;
   }
@@ -295,7 +305,7 @@ function Application(): VNode {
     <Page>
       <SideBar>
         {allExamples.map((e) => (
-          <ExampleList name={e.title} list={e.list} />
+          <ExampleList key={e.title} name={e.title} list={e.list} />
         ))}
         <hr />
       </SideBar>

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

@@ -113,7 +113,7 @@ export function mountHook<T>(callback: () => T, Context?: ({ children }: { child
   renderIntoDom(vdom, parentElement);
 
   // clean up callback
-  function unmount() {
+  function unmount(): void {
     if (!isNode) {
       document.body.removeChild(parentElement);
     }

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

@@ -14,7 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { AmountJson, Amounts, GetExchangeTosResult, TalerUriType } from "@gnu-taler/taler-util";
+import { AmountJson, Amounts, GetExchangeTosResult } from "@gnu-taler/taler-util";
 
 
 function getJsonIfOk(r: Response): Promise<any> {

packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx

@@ -18,7 +18,7 @@ export function AddNewActionView({ onCancel }: Props): VNode {
   const uriType = classifyTalerUri(url);
   const { i18n } = useTranslationContext();
 
-  function redirectToWallet() {
+  function redirectToWallet(): void {
     platform.openWalletURIFromPopup(url);
   }
 

packages/taler-wallet-webextension/src/wallet/BackupPage.tsx

@@ -14,7 +14,7 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
 */
 
-import { AbsoluteTime, Translate } from "@gnu-taler/taler-util";
+import { AbsoluteTime } from "@gnu-taler/taler-util";
 import {
   ProviderInfo,
   ProviderPaymentPaid,
@@ -242,7 +242,7 @@ function daysUntil(d: AbsoluteTime): string {
   return `${str}`;
 }
 
-function getStatusTypeOrder(t: ProviderPaymentStatus) {
+function getStatusTypeOrder(t: ProviderPaymentStatus): number {
   return [
     ProviderPaymentType.InsufficientBalance,
     ProviderPaymentType.TermsChanged,
@@ -252,7 +252,10 @@ function getStatusTypeOrder(t: ProviderPaymentStatus) {
   ].indexOf(t.type);
 }
 
-function getStatusPaidOrder(a: ProviderPaymentPaid, b: ProviderPaymentPaid) {
+function getStatusPaidOrder(
+  a: ProviderPaymentPaid,
+  b: ProviderPaymentPaid,
+): number {
   return a.paidUntil.t_ms === "never"
     ? -1
     : b.paidUntil.t_ms === "never"

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

@@ -19,9 +19,9 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { SelectFieldHandler, TextFieldHandler, useComponentState } from "./CreateManualWithdraw.js";
 import { expect } from "chai";
 import { mountHook } from "../test-utils.js";
+import { SelectFieldHandler, TextFieldHandler, useComponentState } from "./CreateManualWithdraw.js";
 
 
 const exchangeListWithARSandUSD = {
@@ -181,7 +181,7 @@ describe("CreateManualWithdraw states", () => {
 });
 
 
-async function defaultTestForInputText(awaiter: () => Promise<void>, getField: () => TextFieldHandler) {
+async function defaultTestForInputText(awaiter: () => Promise<void>, getField: () => TextFieldHandler): Promise<void> {
   const initialValue = getField().value;
   const otherValue = `${initialValue} something else`
   getField().onInput(otherValue)
@@ -192,7 +192,7 @@ async function defaultTestForInputText(awaiter: () => Promise<void>, getField: (
 }
 
 
-async function defaultTestForInputSelect(awaiter: () => Promise<void>, getField: () => SelectFieldHandler) {
+async function defaultTestForInputSelect(awaiter: () => Promise<void>, getField: () => SelectFieldHandler): Promise<void> {
   const initialValue = getField().value;
   const keys = Object.keys(getField().list)
   const nextIdx = keys.indexOf(initialValue) + 1

packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx

@@ -33,7 +33,6 @@ import {
   LightText,
   LinkPrimary,
   SubTitle,
-  Title,
 } from "../components/styled/index.js";
 import { useTranslationContext } from "../context/translation.js";
 import { Pages } from "../NavigationBar.js";
@@ -232,7 +231,9 @@ export function CreateManualWithdraw({
       <section>
         {error && (
           <ErrorMessage
-            title={<i18n.Translate>Can't create the reserve</i18n.Translate>}
+            title={
+              <i18n.Translate>Can&apos;t create the reserve</i18n.Translate>
+            }
             description={error}
           />
         )}

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

@@ -19,14 +19,15 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { useComponentState } from "./DepositPage.js";
+import { Amounts, Balance } from "@gnu-taler/taler-util";
+import { DepositFee } from "@gnu-taler/taler-wallet-core/src/operations/deposits";
 import { expect } from "chai";
 import { mountHook } from "../test-utils.js";
-import { Amounts, Balance } from "@gnu-taler/taler-util";
+import { useComponentState } from "./DepositPage.js";
 
 
 const currency = "EUR"
-const feeCalculator = async () => ({
+const feeCalculator = async (): Promise<DepositFee> => ({
   coin: Amounts.parseOrThrow(`${currency}:1`),
   wire: Amounts.parseOrThrow(`${currency}:1`),
   refresh: Amounts.parseOrThrow(`${currency}:1`)

packages/taler-wallet-webextension/src/wallet/DepositPage.tsx

@@ -141,7 +141,7 @@ export function useComponentState(
   const [accountIdx, setAccountIdx] = useState(0);
   const [amount, setAmount] = useState<number | undefined>(undefined);
   const [fee, setFee] = useState<DepositGroupFees | undefined>(undefined);
-  function updateAmount(num: number | undefined) {
+  function updateAmount(num: number | undefined): void {
     setAmount(num);
     setFee(undefined);
   }

packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx

@@ -57,8 +57,6 @@ export function DeveloperPage(): VNode {
       ? nonResponse
       : response.response;
 
-  const balanceResponse = useAsyncAsHook(wxApi.getBalance);
-
   return (
     <View
       status={status}
@@ -213,7 +211,7 @@ export function View({
       <p>
         <i18n.Translate>Coins</i18n.Translate>:
       </p>
-      {Object.keys(money_by_exchange).map((ex) => {
+      {Object.keys(money_by_exchange).map((ex, idx) => {
         const allcoins = money_by_exchange[ex];
         allcoins.sort((a, b) => {
           return b.denom_value - a.denom_value;
@@ -231,7 +229,14 @@ export function View({
           } as SplitedCoinInfo,
         );
 
-        return <ShowAllCoins coins={coins} ex={ex} currencies={currencies} />;
+        return (
+          <ShowAllCoins
+            key={idx}
+            coins={coins}
+            ex={ex}
+            currencies={currencies}
+          />
+        );
       })}
       <br />
       <Diagnostics diagnostics={status} timedOut={timedOut} />
@@ -272,7 +277,7 @@ function ShowAllCoins({
   ex: string;
   coins: SplitedCoinInfo;
   currencies: { [ex: string]: string };
-}) {
+}): VNode {
   const { i18n } = useTranslationContext();
   const [collapsedSpent, setCollapsedSpent] = useState(true);
   const [collapsedUnspent, setCollapsedUnspent] = useState(false);
@@ -308,9 +313,9 @@ function ShowAllCoins({
               <i18n.Translate>from refresh?</i18n.Translate>
             </td>
           </tr>
-          {coins.usable.map((c) => {
+          {coins.usable.map((c, idx) => {
             return (
-              <tr>
+              <tr key={idx}>
                 <td>{c.id.substring(0, 5)}</td>
                 <td>{c.denom_value}</td>
                 <td>{c.remain_value}</td>
@@ -347,9 +352,9 @@ function ShowAllCoins({
               <i18n.Translate>from refresh?</i18n.Translate>
             </td>
           </tr>
-          {coins.spent.map((c) => {
+          {coins.spent.map((c, idx) => {
             return (
-              <tr>
+              <tr key={idx}>
                 <td>{c.id.substring(0, 5)}</td>
                 <td>{c.denom_value}</td>
                 <td>{c.remain_value}</td>

packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx

@@ -2,7 +2,7 @@ import {
   canonicalizeBaseUrl,
   TalerConfigResponse,
 } from "@gnu-taler/taler-util";
-import { Fragment, h } from "preact";
+import { Fragment, h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
 import { ErrorMessage } from "../components/ErrorMessage.js";
 import {
@@ -81,7 +81,7 @@ export function ExchangeSetUrlPage({
   onCancel,
   onVerify,
   onConfirm,
-}: Props) {
+}: Props): VNode {
   const { i18n } = useTranslationContext();
   const { loading, result, endpoint, updateEndpoint, error } =
     useEndpointStatus(initialValue ?? "", onVerify);
@@ -119,7 +119,7 @@ export function ExchangeSetUrlPage({
         {result && expectedCurrency && expectedCurrency !== result.currency && (
           <WarningBox>
             <i18n.Translate>
-              This exchange doesn't match the expected currency
+              This exchange doesn&apos;t match the expected currency
               <b>{expectedCurrency}</b>
             </i18n.Translate>
           </WarningBox>

packages/taler-wallet-webextension/src/wallet/History.stories.tsx

@@ -41,7 +41,7 @@ export default {
 };
 
 let count = 0;
-const commonTransaction = () =>
+const commonTransaction = (): TransactionCommon =>
   ({
     amountRaw: "USD:10",
     amountEffective: "USD:9",

packages/taler-wallet-webextension/src/wallet/History.tsx

@@ -26,13 +26,11 @@ import { Loading } from "../components/Loading.js";
 import { LoadingError } from "../components/LoadingError.js";
 import {
   ButtonBoxPrimary,
-  ButtonBoxWarning,
   ButtonPrimary,
   CenteredBoldText,
   CenteredText,
   DateSeparator,
   NiceSelect,
-  WarningBox,
 } from "../components/styled/index.js";
 import { Time } from "../components/Time.js";
 import { TransactionItem } from "../components/TransactionItem.js";

packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx

@@ -18,7 +18,6 @@ import {
   Amounts,
   BackupBackupProviderTerms,
   canonicalizeBaseUrl,
-  Translate,
 } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
@@ -91,7 +90,7 @@ export function SetUrlView({
   onVerify,
   onConfirm,
   withError,
-}: SetUrlViewProps) {
+}: SetUrlViewProps): VNode {
   const { i18n } = useTranslationContext();
   const [value, setValue] = useState<string>(initialValue || "");
   const [urlError, setUrlError] = useState(false);
@@ -191,7 +190,7 @@ export function ConfirmProviderView({
   provider,
   onCancel,
   onConfirm,
-}: ConfirmProviderViewProps) {
+}: ConfirmProviderViewProps): VNode {
   const [accepted, setAccepted] = useState(false);
   const { i18n } = useTranslationContext();
 
@@ -203,13 +202,13 @@ export function ConfirmProviderView({
         </Title>
         <div>
           <i18n.Translate>Provider URL</i18n.Translate>:{" "}
-          <a href={url} target="_blank">
+          <a href={url} target="_blank" rel="noreferrer">
             {url}
           </a>
         </div>
         <SmallLightText>
           <i18n.Translate>
-            Please review and accept this provider's terms of service
+            Please review and accept this provider&apos;s terms of service
           </i18n.Translate>
         </SmallLightText>
         <SubTitle>

packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx

@@ -64,7 +64,8 @@ export function ProviderDetailPage({ pid: providerURL, onBack }: Props): VNode {
       <LoadingError
         title={
           <i18n.Translate>
-            There was an error loading the provider detail for "{providerURL}"
+            There was an error loading the provider detail for &quot;
+            {providerURL}&quot;
           </i18n.Translate>
         }
         error={state}
@@ -110,7 +111,7 @@ export function ProviderView({
         <section>
           <p>
             <i18n.Translate>
-              There is not known provider with url "{url}".
+              There is not known provider with url &quot;{url}&quot;.
             </i18n.Translate>
           </p>
         </section>

packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx

@@ -1,10 +1,8 @@
 import {
   AmountJson,
-  parsePaytoUri,
   Amounts,
-  segwitMinAmount,
-  generateFakeSegwitAddress,
   PaytoUri,
+  segwitMinAmount,
 } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { BankDetailsByPaytoType } from "../components/BankDetailsByPaytoType.js";
@@ -58,8 +56,8 @@ export function ReserveCreated({
           </p>
           <p>
             <i18n.Translate>
-              In bitcoincore wallet use 'Add Recipient' button to add two
+              In bitcoincore wallet use &apos;Add Recipient&apos; button to add
-              additional recipient and copy adresses and amounts
+              two additional recipient and copy addresses and amounts
             </i18n.Translate>
             <ul>
               <li>
@@ -73,8 +71,8 @@ export function ReserveCreated({
               </li>
             </ul>
             <i18n.Translate>
-              In Electrum wallet paste the following three lines in 'Pay to'
+              In Electrum wallet paste the following three lines in &apos;Pay
-              field :
+              to&apos; field :
             </i18n.Translate>
             <ul>
               <li>

packages/taler-wallet-webextension/src/wallet/Settings.tsx

@@ -32,7 +32,6 @@ import { useTranslationContext } from "../context/translation.js";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
 import { useBackupDeviceName } from "../hooks/useBackupDeviceName.js";
 import { useExtendedPermissions } from "../hooks/useExtendedPermissions.js";
-import { useLang } from "../hooks/useLang.js";
 import { Pages } from "../NavigationBar.js";
 import { buildTermsOfServiceStatus } from "../utils/index.js";
 import * as wxApi from "../wxApi.js";

packages/taler-wallet-webextension/src/wallet/Welcome.tsx

@@ -23,7 +23,6 @@
 import { WalletDiagnostics } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { Checkbox } from "../components/Checkbox.js";
-import { Diagnostics } from "../components/Diagnostics.js";
 import { SubTitle, Title } from "../components/styled/index.js";
 import { useTranslationContext } from "../context/translation.js";
 import { useDiagnostics } from "../hooks/useDiagnostics.js";

packages/taler-wallet-webextension/src/walletEntryPoint.dev.tsx

@@ -21,7 +21,7 @@
  */
 
 import { setupI18n } from "@gnu-taler/taler-util";
-import { Fragment, h, render } from "preact";
+import { h, render } from "preact";
 import { strings } from "./i18n/strings.js";
 import { setupPlatform } from "./platform/api.js";
 import devAPI from "./platform/dev.js";

packages/taler-wallet-webextension/src/walletEntryPoint.tsx

@@ -21,7 +21,7 @@
  */
 
 import { setupI18n } from "@gnu-taler/taler-util";
-import { Fragment, h, render } from "preact";
+import { h, render } from "preact";
 import { strings } from "./i18n/strings.js";
 import { setupPlatform } from "./platform/api.js";
 import chromeAPI from "./platform/chrome.js";

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

@@ -40,6 +40,7 @@ import {
   Wallet,
   WalletStoresV1
 } from "@gnu-taler/taler-wallet-core";
+import { VNode } from "preact";
 import { BrowserCryptoWorkerFactory } from "./browserCryptoWorkerFactory.js";
 import { BrowserHttpLib } from "./browserHttpLib.js";
 import { getReadRequestPermissions } from "./permissions.js";
@@ -221,7 +222,7 @@ async function reinitWallet(): Promise<void> {
   walletInit.resolve();
 }
 
-function parseTalerUriAndRedirect(tabId: number, talerUri: string) {
+function parseTalerUriAndRedirect(tabId: number, talerUri: string): VNode {
   const uriType = classifyTalerUri(talerUri);
   switch (uriType) {
     case TalerUriType.TalerWithdraw: