added react eslint and fix most of the warns

14 files changed, 80 insertions, 80 deletions

diff --git a/packages/taler-wallet-webextension/src/mui/Avatar.tsx b/packages/taler-wallet-webextension/src/mui/Avatar.tsx
index c1df00a13..3bd5daa95 100644
--- a/packages/taler-wallet-webextension/src/mui/Avatar.tsx
+++ b/packages/taler-wallet-webextension/src/mui/Avatar.tsx
@@ -18,21 +18,21 @@ const root = css`
   user-select: none;
 `;
 
-const colorStyle = css`
-  color: ${theme.palette.background.default};
-  background-color: ${theme.palette.mode === "light"
-    ? theme.palette.grey[400]
-    : theme.palette.grey[600]};
-`;
+// const colorStyle = css`
+//   color: ${theme.palette.background.default};
+//   background-color: ${theme.palette.mode === "light"
+//     ? theme.palette.grey[400]
+//     : theme.palette.grey[600]};
+// `;
 
-const avatarImageStyle = css`
-  width: 100%;
-  height: 100%;
-  text-align: center;
-  object-fit: cover;
-  color: transparent;
-  text-indent: 10000;
-`;
+// const avatarImageStyle = css`
+//   width: 100%;
+//   height: 100%;
+//   text-align: center;
+//   object-fit: cover;
+//   color: transparent;
+//   text-indent: 10000;
+// `;
 
 interface Props extends JSX.HTMLAttributes<HTMLDivElement> {
   variant?: "circular" | "rounded" | "square";
diff --git a/packages/taler-wallet-webextension/src/mui/Button.stories.tsx b/packages/taler-wallet-webextension/src/mui/Button.stories.tsx
index 145e1a159..4d3832ed4 100644
--- a/packages/taler-wallet-webextension/src/mui/Button.stories.tsx
+++ b/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}>
diff --git a/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx b/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx
index fc4f9a585..b2db178e7 100644
--- a/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx
+++ b/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}>
diff --git a/packages/taler-wallet-webextension/src/mui/Grid.tsx b/packages/taler-wallet-webextension/src/mui/Grid.tsx
index 5d1b79b2a..d91368b13 100644
--- a/packages/taler-wallet-webextension/src/mui/Grid.tsx
+++ b/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) + "%"
diff --git a/packages/taler-wallet-webextension/src/mui/Paper.stories.tsx b/packages/taler-wallet-webextension/src/mui/Paper.stories.tsx
index bc80bd500..e7030e781 100644
--- a/packages/taler-wallet-webextension/src/mui/Paper.stories.tsx
+++ b/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={{
diff --git a/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx b/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx
index bc8505454..85550aabf 100644
--- a/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx
+++ b/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 Filled = () => BasicExample("filled");
-export const Outlined = () => BasicExample("outlined");
+export const Standard = (): VNode => BasicExample("standard");
+export const Filled = (): VNode => BasicExample("filled");
+export const Outlined = (): VNode => BasicExample("outlined");
 
-export const Color = () => (
+export const Color = (): VNode => (
   <Container>
     <TextField
       variant="standard"
diff --git a/packages/taler-wallet-webextension/src/mui/colors/manipulation.ts b/packages/taler-wallet-webextension/src/mui/colors/manipulation.ts
index 55d0523b7..d1181b6d6 100644
--- a/packages/taler-wallet-webextension/src/mui/colors/manipulation.ts
+++ b/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({
diff --git a/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx b/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx
index d4fa0368e..8860ce20d 100644
--- a/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx
+++ b/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];
diff --git a/packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx b/packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx
index da10eec11..eeb9e52c0 100644
--- a/packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx
+++ b/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 (
diff --git a/packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx b/packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx
index fffef41db..3460aacde 100644
--- a/packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx
+++ b/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,
diff --git a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
index 331d9ce95..a25366bd2 100644
--- a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
+++ b/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} />;
 }
diff --git a/packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx b/packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx
index 6d6aae4f3..4b51915e1 100644
--- a/packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx
+++ b/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
diff --git a/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx b/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx
index 9d79a7019..3eacd7984 100644
--- a/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx
+++ b/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} />;
 }
diff --git a/packages/taler-wallet-webextension/src/mui/style.tsx b/packages/taler-wallet-webextension/src/mui/style.tsx
index df4f5176c..5be978794 100644
--- a/packages/taler-wallet-webextension/src/mui/style.tsx
+++ b/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) {
-    return {
-      toolbar: {
-        minHeight: 56,
-        [`${breakpoints.up("xs")} and (orientation: landscape)`]: {
-          minHeight: 48,
-        },
-        [breakpoints.up("sm")]: {
-          minHeight: 64,
-        },
-      },
-      ...mixins,
-    };
-  }
+  // function createMixins(breakpoints: any, spacing: any, mixins: any) {
+  //   return {
+  //     toolbar: {
+  //       minHeight: 56,
+  //       [`${breakpoints.up("xs")} and (orientation: landscape)`]: {
+  //         minHeight: 48,
+  //       },
+  //       [breakpoints.up("sm")]: {
+  //         minHeight: 64,
+  //       },
+  //     },
+  //     ...mixins,
+  //   };
+  // }
 
   /////////////////////
   ///////////////////// TRANSITION