diff --git a/.eslintrc.js b/.eslintrc.js index 5d6ba1e72..01e64163d 100644 --- a/.eslintrc.js +++ b/.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, + }, }; diff --git a/packages/taler-wallet-webextension/src/browserHttpLib.ts b/packages/taler-wallet-webextension/src/browserHttpLib.ts index 53ab85598..537d4e75d 100644 --- a/packages/taler-wallet-webextension/src/browserHttpLib.ts +++ b/packages/taler-wallet-webextension/src/browserHttpLib.ts @@ -45,7 +45,7 @@ export class BrowserHttpLib implements HttpRequestLibrary { options?: HttpRequestOptions, ): Promise { 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); diff --git a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx index f023e0d83..4d328a723 100644 --- a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx +++ b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx @@ -51,7 +51,7 @@ function SignalWifiOffIcon({ ...rest }: any): VNode { return ; } -export const BasicExample = () => ( +export const BasicExample = (): VNode => (

@@ -86,7 +86,7 @@ export const BasicExample = () => ( ); -export const PendingOperation = () => ( +export const PendingOperation = (): VNode => ( ( +const Tick = (): VNode => ( */ -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"; diff --git a/packages/taler-wallet-webextension/src/components/ExchangeToS.tsx b/packages/taler-wallet-webextension/src/components/ExchangeToS.tsx index a71108c50..6aee838a1 100644 --- a/packages/taler-wallet-webextension/src/components/ExchangeToS.tsx +++ b/packages/taler-wallet-webextension/src/components/ExchangeToS.tsx @@ -23,7 +23,7 @@ export function ExchangeXmlTos({ doc }: { doc: Document }): VNode {

The exchange send us an xml but there is no node with - 'ids=terms-of-service'. This is the content: + 'ids=terms-of-service'. This is the content:

{new XMLSerializer().serializeToString(doc)}
diff --git a/packages/taler-wallet-webextension/src/components/LogoHeader.tsx b/packages/taler-wallet-webextension/src/components/LogoHeader.tsx index 573221614..9e7bfc642 100644 --- a/packages/taler-wallet-webextension/src/components/LogoHeader.tsx +++ b/packages/taler-wallet-webextension/src/components/LogoHeader.tsx @@ -14,10 +14,10 @@ GNU Taler; see the file COPYING. If not, see */ -import { h } from "preact"; +import { h, VNode } from "preact"; import logo from "../svg/logo-2021.svg"; -export function LogoHeader() { +export function LogoHeader(): VNode { return (
*/ -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 (
diff --git a/packages/taler-wallet-webextension/src/components/PendingTransactions.stories.tsx b/packages/taler-wallet-webextension/src/components/PendingTransactions.stories.tsx index 27146479b..32f970f9a 100644 --- a/packages/taler-wallet-webextension/src/components/PendingTransactions.stories.tsx +++ b/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", diff --git a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx index 0a101acd0..2d8a776cd 100644 --- a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx +++ b/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 } from "preact"; +import { Fragment, h, JSX, VNode } 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 ( { 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 }); }; diff --git a/packages/taler-wallet-webextension/src/context/translation.ts b/packages/taler-wallet-webextension/src/context/translation.ts index b39a7e0de..9d55c918b 100644 --- a/packages/taler-wallet-webextension/src/context/translation.ts +++ b/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; diff --git a/packages/taler-wallet-webextension/src/cta/Deposit.tsx b/packages/taler-wallet-webextension/src/cta/Deposit.tsx index 3b6b798ee..7ade50e2c 100644 --- a/packages/taler-wallet-webextension/src/cta/Deposit.tsx +++ b/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"; diff --git a/packages/taler-wallet-webextension/src/cta/Pay.tsx b/packages/taler-wallet-webextension/src/cta/Pay.tsx index 4d1758e2e..c2f352661 100644 --- a/packages/taler-wallet-webextension/src/cta/Pay.tsx +++ b/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, diff --git a/packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx b/packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx index 0320a8c15..b49627689 100644 --- a/packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx +++ b/packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx @@ -37,7 +37,7 @@ export function TermsOfServiceSection({
- Exchange doesn't have terms of service + Exchange doesn't have terms of service
@@ -51,7 +51,7 @@ export function TermsOfServiceSection({
- Exchange doesn't have terms of service + Exchange doesn't have terms of service
diff --git a/packages/taler-wallet-webextension/src/cta/Tip.stories.tsx b/packages/taler-wallet-webextension/src/cta/Tip.stories.tsx index 9637be087..debf64aa3 100644 --- a/packages/taler-wallet-webextension/src/cta/Tip.stories.tsx +++ b/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"; diff --git a/packages/taler-wallet-webextension/src/cta/Tip.tsx b/packages/taler-wallet-webextension/src/cta/Tip.tsx index 2725140b0..071243f31 100644 --- a/packages/taler-wallet-webextension/src/cta/Tip.tsx +++ b/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 => { 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 ( - You've ignored the tip. + You've ignored the tip. ); } diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx index feac2cebb..67a910397 100644 --- a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx +++ b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx @@ -104,7 +104,7 @@ export function View({ {}, ); - async function doWithdrawAndCheckError() { + async function doWithdrawAndCheckError(): Promise { try { setConfirmDisabled(true); await onWithdraw(); diff --git a/packages/taler-wallet-webextension/src/cta/return-coins.tsx b/packages/taler-wallet-webextension/src/cta/return-coins.tsx index d4ea06361..ae2bb07b6 100644 --- a/packages/taler-wallet-webextension/src/cta/return-coins.tsx +++ b/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 ( diff --git a/packages/taler-wallet-webextension/src/hooks/useAsyncAsHook.ts b/packages/taler-wallet-webextension/src/hooks/useAsyncAsHook.ts index 5bd2d6f81..68bc9aed7 100644 --- a/packages/taler-wallet-webextension/src/hooks/useAsyncAsHook.ts +++ b/packages/taler-wallet-webextension/src/hooks/useAsyncAsHook.ts @@ -14,9 +14,7 @@ TALER; see the file COPYING. If not, see */ import { - NotificationType, - TalerErrorCode, - TalerErrorDetail, + NotificationType, 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( ): HookResponse { const [result, setHookResponse] = useState>(undefined); useEffect(() => { - async function doAsync() { + async function doAsync(): Promise { try { const response = await fn(); setHookResponse({ hasError: false, response }); @@ -76,6 +74,6 @@ export function useAsyncAsHook( doAsync(); }); } - }, []); + }); return result; } diff --git a/packages/taler-wallet-webextension/src/hooks/useBackupDeviceName.ts b/packages/taler-wallet-webextension/src/hooks/useBackupDeviceName.ts index 7f484b0a4..4bb332da8 100644 --- a/packages/taler-wallet-webextension/src/hooks/useBackupDeviceName.ts +++ b/packages/taler-wallet-webextension/src/hooks/useBackupDeviceName.ts @@ -29,11 +29,11 @@ export function useBackupDeviceName(): BackupDeviceName { }); useEffect(() => { - async function run() { + async function run(): Promise { //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 { await wxApi.setWalletDeviceId(newName); setStatus((old) => ({ ...old, name: newName })); } diff --git a/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts b/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts index 8d563cb6d..18283995f 100644 --- a/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts +++ b/packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts @@ -22,7 +22,7 @@ import { getReadRequestPermissions } from "../permissions.js"; export function useExtendedPermissions(): [boolean, () => Promise] { const [enabled, setEnabled] = useState(false); - const toggle = async () => { + const toggle = async (): Promise => { return handleExtendedPerm(enabled, setEnabled) }; diff --git a/packages/taler-wallet-webextension/src/hooks/useLocalStorage.ts b/packages/taler-wallet-webextension/src/hooks/useLocalStorage.ts index 4be82976f..31d54e451 100644 --- a/packages/taler-wallet-webextension/src/hooks/useLocalStorage.ts +++ b/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") { diff --git a/packages/taler-wallet-webextension/src/hooks/useProviderStatus.ts b/packages/taler-wallet-webextension/src/hooks/useProviderStatus.ts index 14af7c0aa..4e7cab393 100644 --- a/packages/taler-wallet-webextension/src/hooks/useProviderStatus.ts +++ b/packages/taler-wallet-webextension/src/hooks/useProviderStatus.ts @@ -28,7 +28,7 @@ export function useProviderStatus(url: string): ProviderStatus | undefined { const [status, setStatus] = useState(undefined); useEffect(() => { - async function run() { + async function run(): Promise { //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 { if (info) { await wxApi.syncOneProvider(info.syncProviderBaseUrl); } } - async function remove() { + async function remove(): Promise { 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; } diff --git a/packages/taler-wallet-webextension/src/hooks/useTalerActionURL.ts b/packages/taler-wallet-webextension/src/hooks/useTalerActionURL.ts index be0a3262e..b2dd739e2 100644 --- a/packages/taler-wallet-webextension/src/hooks/useTalerActionURL.ts +++ b/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]; } 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 { 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 => (